/* ==========================================================
   🧱 BRICK & BEYOND – GLOBAL LAYOUT (Merged Final)
   Version: 4.0 — Unified Variables + Typography + Layout Tokens
   ========================================================== */

/* ==========================================================
   🌍 GLOBAL VARIABLES – COLORS, FONTS, SHIFTS
   ========================================================== */
:root {
  /* =========================
     Fonts
     ========================= */
  --font-heading: 'Canela', serif;
  --font-body: 'Poppins', sans-serif;
  --font-softlink: var(--font-body);

  /* =========================
     General Page Colors
     ========================= */
  --accent: #a27b5c;               /* Primary accent (goldish) */
  --muted: #777;                   /* Muted text color */
  --bg: #ffffff;                   /* Page background */
  --maxw: 1200px;                  /* Max width for container/grid */
  --color-text-default: #1C1C1C;   /* Global text color */

  /* =========================
     Property Container Shift
     ========================= */
  --property-shift-right: 100px; /* Moves entire property content right */

  /* =========================
     Accent & Hover Colors
     ========================= */
  --color-accent-gold: #C9A45C;
  --color-accent-hover:  #aa4a44; /*==== changed from #f58220 ======= */

  /* =========================
     Pills / Tags
     ========================= */
  --color-pill-text: #333333;
  --color-pill-bg: rgba(212,175,55,0.1);
  --color-pill-border: rgba(212,175,55,0.3);

  /* =========================
     Specs Icons (Bed/Bath/Area)
     ========================= */
  --color-specs-icon: #D8AE47;

  /* =========================
     Contact Box
     ========================= */
  --color-contact-icon: #D8AE47;
  --color-contact-icon-hover-whatsapp: #25D366;
  --color-contact-icon-hover-phone: #007bff;
  --color-contact-icon-hover-email: #ea4335;
  --color-contact-btn: #D8AE47; /* Submit button color */

  /* =========================
     Title / Price
     ========================= */
  --color-price: #222222;
  --color-title: #1C1C1C;

  /* =========================
     Dividers & Card Borders
     ========================= */
  --color-divider: rgba(212,175,55,0.25);
  --color-card-border: rgba(212,175,55,0.3);
  --color-card-border-hover: rgba(212,175,55,0.75);
  --color-card-shadow-light: rgba(212,175,55,0.25);
  --color-card-shadow-medium: rgba(212,175,55,0.35);
  --color-card-shadow-strong: rgba(212,175,55,0.45);
}

/* ==========================================================
   🌍 GLOBAL BASE STYLES
   ========================================================== */
html, body {
  box-sizing: border-box;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  background: var(--bg) !important;
  color: var(--color-text-default);
}

/* Preserve inheritance for inline elements */
p, span, li, input, textarea, select, button {
  font: inherit;
}

/* ==========================================================
   🧱 BASE TYPOGRAPHY – POPPINS
   ========================================================== */
body,
main,
section,
p,
.available-timing,
.site-description,
.site-footer,
.footer-widget-area,
.ast-footer-copyright {
  font-family: var(--font-body);
  font-weight: 400;
  color: var(--color-text-default);
  line-height: 1.5;
}

/* ==========================================================
   🏷️ HEADINGS / BRAND – CANELA
   ========================================================== */
h1, h2, h3, h4, h5, h6,
.site-title,
.footer-widget-area .widget-title,
.bnb-title,
.bnb-header-line,
.bnb-breadcrumb-inner a {
  font-family: var(--font-heading);
  font-weight: 600;
  line-height: 1.15;
  color: var(--color-title);
}

/* ==========================================================
   💰 CARD TITLES / LINKS / CONTENT
   ========================================================== */
.bnb-card-title,
.bnb-card-title a {
  font-family: var(--font-heading);
  font-weight: 600;
  color: var(--color-text-default);
  text-decoration: none;
}

.bnb-card-title > a {
  font: inherit;
}

/* Card content + metadata (explicit body font context) */
.bnb-card-content,
.bnb-card-location,
.bnb-card-specs,
.bnb-specs,
.bnb-card-price,
.bnb-price,
.bnb-footer-tags,
.meta-pill,
.bnb-footer-line {
  font-family: var(--font-body);
  font-weight: 400;
  color: var(--color-text-default);
  line-height: 1.5;
}

/* ==========================================================
   ✨ SOFT LINK – Global Hover Animation
   ========================================================== */
.bnb-soft-link {
  position: relative;
  display: inline-block;
  font-family: var(--font-softlink);
  font-weight: 500;
  color: var(--color-text-default);
  text-decoration: none;
  padding-bottom: 3px;
  transition: all 0.3s ease;
}
.bnb-soft-link::after {
  content: "";
  position: absolute;
  bottom: 0;
  left: 0;
  width: 40%;
  height: 2px;
  background: var(--color-accent-gold);
  transition: width 0.3s ease, background 0.3s ease;
}
/* ==========================================================
   🧱 FIX: .bnb-soft-link hover — ensure text turns brick red + bold
   ========================================================== */
.bnb-soft-link:hover {
  color: var(--color-accent-hover) !important; /* force brick red */
  font-weight: 600 !important; /* bold on hover */
}

.bnb-soft-link:hover::after {
  width: 100%;
  background: var(--color-accent-hover);
}


/* ==========================================================
   🎯 TARGETED EXCEPTIONS (Safe !important Overrides)
   ========================================================== */
h1 a, h2 a, h3 a, h4 a, .bnb-card-title a {
  color: inherit !important;
  text-decoration: none !important;
  font-family: inherit !important;
  font-weight: inherit !important;
}

/* ==========================================================
   🧩 PROPERTY CONTENT GRID – Shift Container Right
   ========================================================== */
.bnb-property-content {
  max-width: var(--maxw);
  margin: 25px 0 60px calc(var(--property-shift-right));
  display: grid;
  grid-template-columns: 2fr 360px;
  gap: 20px;
  padding: 0 20px;
  position: relative;
  z-index: 3;
  /* ⚙️ All content moves together; adjust --property-shift-right to move left/right */
}

/* ==========================================================
   📜 NOTES
   - This file merges global tokens, typography, and grid structure.
   - Fully compatible with Astra child theme or independent layout CSS.
   - No functionality or hover effects removed.
   ========================================================== */




/* =========================================
   2️⃣ FOOTER – TYPOGRAPHY & COLOR PALETTE
   ========================================= */
.site-footer {
  background: #ffffff !important;
  color: #111111 !important;
}

/* Footer Titles – Canela */
.footer-widget-area h1,
.footer-widget-area h2,
.footer-widget-area .widget-title,
.footer-widget-area .site-title {
  font-family: 'Canela', serif !important;
  font-weight: 400 !important;
  color: #111111 !important;
}

/* Footer Links – Poppins + hover orange */
.footer-widget-area a {
  font-family: 'Poppins', sans-serif !important;
  color: #111111 !important;
  text-decoration: none !important;
  transition: color 0.2s ease;
}

.footer-widget-area a:hover {
  color: #aa4a44 !important; /*==== changed from #f58220 ======= */
}

/* Subtle Footer Text (Copyright, Timings) */
.ast-footer-copyright,
.available-timing,
.site-footer p,
.footer-widget-area p {
  color: #777777 !important;
  font-size: 0.9rem;
  line-height: 1.6;
}



.footer-widget-area h1 a {
  color: #aa4a44 !important;
}



/* =========================================
   3️⃣ HEADER – BASE STRUCTURE
   ========================================= */
.main-header-bar {
  position: fixed;
  top: 0; left: 0;
  width: 100%;
  z-index: 9999;
  background: rgba(255, 255, 255, 0.95);
  backdrop-filter: blur(8px);
  box-shadow: 0 2px 5px rgba(0,0,0,0.08);
  transition: transform 0.4s ease, background 0.4s ease, box-shadow 0.4s ease, color 0.3s ease;
  will-change: transform, background, color;
}

/* =========================================
   4️⃣ HOMEPAGE HEADER – TRANSPARENT → SOLID
   ========================================= */
.home .ast-primary-header-bar.main-header-bar {
  background-color: transparent !important;
  box-shadow: none !important;
  border: none !important;
  transition: background-color 0.4s ease, transform 0.3s ease;
}

/* Solidify on scroll */
.home .ast-primary-header-bar.main-header-bar.header-solid {
  background-color: #ffffff !important;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05) !important;
}

/* Transparent (white text) */
.home .ast-primary-header-bar.main-header-bar:not(.header-solid),
.home .ast-primary-header-bar.main-header-bar:not(.header-solid) a,
.home .ast-primary-header-bar.main-header-bar:not(.header-solid) .site-description,
.home .ast-primary-header-bar.main-header-bar:not(.header-solid) svg path {
  color: #ffffff !important;
  fill: #ffffff !important;
  transition: color 0.3s ease, fill 0.3s ease;
}

/* Hover – white + orange underline */
.home .ast-primary-header-bar.main-header-bar:not(.header-solid) .main-header-menu > li > a:hover,
.home .ast-primary-header-bar.main-header-bar:not(.header-solid) .main-header-menu > li.current-menu-item > a {
  color: #ffffff !important;
  font-weight: 600 !important;
  border-bottom: 2px solid #aa4a44 !important; /*==== changed from #f58220 ======= */
}

/* Solid (scrolled) – black text */
.home .ast-primary-header-bar.main-header-bar.header-solid,
body:not(.home) .ast-primary-header-bar.main-header-bar {
  background: #ffffff !important;
  color: #111111 !important;
  fill: #111111 !important;
  transition: background 0.3s ease, color 0.3s ease;
}

.home .ast-primary-header-bar.main-header-bar.header-solid a,
body:not(.home) .ast-primary-header-bar.main-header-bar a,
.home .ast-primary-header-bar.main-header-bar.header-solid .site-description,
body:not(.home) .ast-primary-header-bar.main-header-bar .site-description,
.home .ast-primary-header-bar.main-header-bar.header-solid svg path,
body:not(.home) .ast-primary-header-bar.main-header-bar svg path {
  color: #111111 !important;
  fill: #111111 !important;
}

/* Hover/Active – black + orange underline */
.home .ast-primary-header-bar.main-header-bar.header-solid .main-header-menu > li > a:hover,
.home .ast-primary-header-bar.main-header-bar.header-solid .main-header-menu > li.current-menu-item > a,
body:not(.home) .ast-primary-header-bar.main-header-bar .main-header-menu > li > a:hover,
body:not(.home) .ast-primary-header-bar.main-header-bar .main-header-menu > li.current-menu-item > a {
  color: #111111 !important;
  font-weight: 600 !important;
  border-bottom: 2px solid #aa4a44 !important; /*==== changed from #f58220 ======= */
}

/* =========================================
   5️⃣ NON-HOME HEADER – STICKY + AUTO-HIDE
   ========================================= */
body:not(.home) .ast-primary-header-bar.main-header-bar {
  background-color: #ffffff !important;
  transition: transform 0.3s ease, background-color 0.3s ease;
}

/* Auto-hide (controlled by JS) */
.ast-primary-header-bar.main-header-bar.hide,
.ast-primary-header-bar.main-header-bar.hide-header {
  transform: translateY(-110%) !important;
  transition: transform 0.32s cubic-bezier(.2,.9,.2,1) !important;
  will-change: transform !important;
}

/* Default visible */
.ast-primary-header-bar.main-header-bar {
  transform: translateY(0) !important;
  transition: transform 0.32s cubic-bezier(.2,.9,.2,1) !important;
}

/* =========================================
   6️⃣ MENU LINK STYLES
   ========================================= */
.main-header-menu a {
  color: inherit !important;
  font-weight: 400 !important;
  text-decoration: none !important;
  border-bottom: 2px solid transparent !important;
  transition: all 0.2s ease;
}

/* Non-home: force black links */
body:not(.home) .main-header-menu a {
  color: #000 !important;
}

/* Hover (handled above for both states) */
.main-header-menu a:hover {
  font-weight: 600 !important;
}

/* Active links */
.main-header-menu .current-menu-item > a,
.main-header-menu .current_page_item > a {
  font-weight: 600 !important;
  border-bottom-color: #aa4a44 !important;  /*==== changed from #f58220 ======= */
}

/* =========================================
   7️⃣ HERO SECTION + SEARCH (CLEANUP)
   ========================================= */
.bnb-home-hero {
  background-size: cover !important;
  background-position: center center !important;
  background-repeat: no-repeat !important;
  background-color: transparent !important;
  border: none !important;
  box-shadow: none !important;
}

/* Remove unwanted divider */
.section-divider { display: none !important; }

/* Keep search layout intact */
.bnb-search-wrapper {
  max-width: 1000px !important;
  margin: 0 auto !important;
}

/* =========================================
   8️⃣ NON-HOME PAGES – CONTENT OFFSET
   ========================================= */
/*==========.    body:not(.home) .site-content {
  padding-top: 110px !important; /* matches header height 
} ============= */




/*=========== Mobile section ===== */


/* ==========================================================
   🧱 BRICK & BEYOND – MOBILE HEADER UNIFICATION FIX
   ========================================================== */
/* MOBILE-ONLY: consistent header + mobile menu (max-width 921px) */
/* ==========================================================
   📱 MOBILE HEADER MENU – CENTERED & WHITE BACKGROUND
   ========================================================== */

/* =====================================================
   🧭 Astra Inline Mobile Menu — Force Center + White BG
   ===================================================== */
.ast-builder-menu-mobile {
  display: none !important; /* start hidden */
  position: fixed !important;
  top: 0;
  left: 0;
  width: 100%;
  height: 100vh;
  background: #fff !important;
  color: #000 !important;
  z-index: 99999 !important;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  overflow-y: auto;
  text-align: center;
}

.ast-builder-menu-mobile .main-header-menu a {
  color: #000 !important;
  font-family: 'Poppins', sans-serif !important;
  font-weight: 500;
  font-size: 18px;
  text-decoration: none;
  text-transform: none;
  margin: 10px 0;
}

.ast-builder-menu-mobile .main-header-menu a:hover {
  color: #333 !important;
}

/* ===== Make homepage mobile header solid white (force) ===== */

/* ==========================================================
   🧱 FINAL MOBILE HEADER OVERRIDE – FORCE SOLID WHITE
   ========================================================== */
@media (max-width: 768px) {
  /* 🧱 1. Fix hero section being pushed up */
  body.home .bnb-home-hero {
/*     margin-top: 100px !important; adjust if header is taller */
    position: relative !important;
    z-index: 1 !important;
  }

  /* 🧭 2. Force all mobile header text & icons black */
  .ast-mobile-header-wrap,
  .ast-mobile-header-wrap * ,
  header#masthead,
  header#masthead *,
  .main-header-bar,
  .main-header-bar * {
    color: #000000 !important;
    fill: #000000 !important;
    stroke: #000000 !important;
  }

  /* 🧩 3. Company name + tagline black */
  .site-title,
  .site-description {
    color: #000000 !important;
  }

  /* 🍔 4. Mobile burger icon black */
  .ast-button-wrap .menu-toggle,
  .ast-button-wrap .menu-toggle svg path {
    fill: #000000 !important;
    stroke: #000000 !important;
  }

  /* 🖋 5. Mobile menu links black */
  .ast-builder-menu-mobile .main-header-menu a {
    color: #000000 !important;
  }
}





/* ==========================================================
   🧱 FIX: Unify Button + Input Focus Glow to Brick Red
   ========================================================== */
.bnb-search-btn,
button,
input[type="submit"],
input[type="button"] {
  background-color: #AA4A44 !important;
  color: #fff !important;
  border: none !important;
  transition: background 0.3s ease, transform 0.2s ease;
}

.bnb-search-btn:hover,
button:hover,
input[type="submit"]:hover,
input[type="button"]:hover {
  background-color: #8c3936 !important; /* darker brick red */
  transform: translateY(-2px);
}

input:focus,
textarea:focus,
select:focus {
  border-color: #AA4A44 !important;
  box-shadow: 0 0 0 2px rgba(170, 74, 68, 0.4) !important;
  outline: none !important;
}


/* ==========================================================
   🧱 BRICK & BEYOND – PAGE TITLE SPACING FIX (Unified Responsive)
   Targets:
   • Blog main page (.blog)
   • Single blog posts (.single-post)
   • Page ID 155 (.page-id-155)
   • Page ID 223 (.page-id-223)
   ========================================================== */
/* ==============================
   📌 Page Titles: Blog Archive + Career Page
============================== */
.blog .bnb-page-header .bnb-page-title,
.page-id-223 .bnb-careers-title { /* Career Page */
    margin-top: 100px !important;
    position: relative;
    z-index: 2;
}

/* 📌 Single Blog Posts + Property Vault Page */
.single .bnb-blog-header h1,
.page-id-155 .bnb-page-header .bnb-page-title { /* Property Vault Page */
    margin-top: 130px !important;
    position: relative;
    z-index: 2;
}

/* ==============================
   📱 Tablet / Medium Screens
============================== */
@media (max-width: 768px) {
    .blog .bnb-page-header .bnb-page-title,
    .page-id-223 .bnb-careers-title {
        margin-top: 90px !important;
    }
    .single .bnb-blog-header h1,
    .page-id-155 .bnb-page-header .bnb-page-title {
        margin-top: 110px !important;
    }
}

/* ==============================
   📱 Small Phones / Mobile
============================== */
@media (max-width: 480px) {
    .blog .bnb-page-header .bnb-page-title,
    .page-id-223 .bnb-careers-title {
        margin-top: 70px !important;
    }
    .single .bnb-blog-header h1 {
    margin-top: 90px !important;
  }

  .page-id-155 .bnb-page-header .bnb-page-title {
    margin-top: 100px !important;
  }
}


/* Contact Us tab — always brick red */
.bnb-contact.sticky-right .bnb-contact-label {
    background-color: #aa4a44 !important;
    color: #fff !important; /* ensures text is readable */
}