/* Better Rate Mortgage — full-width "Buy a Home" mega menu.
   JS (nav-megamenu.js) restructures the dropdown into .mm-inner (two link columns + a CTA rail)
   and breaks it to full viewport width. Scoped to the Buy a Home parent (lili.brm-mega). */

/* Open the header dropdowns on hover (desktop only). */
@media(min-width:992px){
  #menu-main-menu li.menu-item.dropdown:hover > .dropdown-menu{ display:block; }
}

li.brm-mega > .dropdown-menu{
  min-width:0;
  margin-top:14px;
  padding:0;
  border:0;
  border-top:0.5px solid #e3e8f0;
  border-radius:0;
  background:#fff;
  box-shadow:0 18px 40px rgba(13,39,72,.16);
}
/* transparent bridge over the gap so moving the cursor down doesn't drop the hover */
li.brm-mega > .dropdown-menu::before{
  content:"";
  position:absolute;
  left:0;
  right:0;
  top:-14px;
  height:14px;
}

/* centered content inside the full-width bar */
.mm-inner{
  display:flex;
  align-items:stretch;
  gap:50px;
  max-width:1200px;
  margin:0 auto;
  padding:30px 30px 34px;
}
.mm-col{ flex:1 1 0; min-width:0; }

/* Soft entrance — replays each time the panel goes display:none -> visible (hover or tap). */
@keyframes brmMmIn{ from{ opacity:0; transform:translateY(12px); } to{ opacity:1; transform:translateY(0); } }
.mm-inner > *{ animation:brmMmIn .4s ease both; }
.mm-inner > *:nth-child(1){ animation-delay:.02s; }
.mm-inner > *:nth-child(2){ animation-delay:.09s; }
.mm-inner > *:nth-child(3){ animation-delay:.16s; }
@media(prefers-reduced-motion:reduce){ .mm-inner > *{ animation:none; } }
.mm-col-h{
  font-size:11px;
  font-weight:700;
  letter-spacing:.09em;
  text-transform:uppercase;
  color:#8a93a3;
  padding:0 0 12px 4px;
}

/* link items */
li.brm-mega .mm-col .dropdown-item{
  position:relative !important;
  display:block !important;
  text-align:left !important;
  padding:9px 12px 9px 42px !important;
  border-radius:8px;
  white-space:nowrap;
  color:#0d2748;
  font-weight:600;
  font-size:14px;
}
li.brm-mega .mm-col .dropdown-item:hover,
li.brm-mega .mm-col .dropdown-item:focus{ background:#eef3fb; color:#185FA5; }

/* icons (Dashicons), pinned left */
li.brm-mega .mm-col li.mm-item > a::before{
  position:absolute;
  left:12px;
  top:50%;
  transform:translateY(-50%);
  font-family:dashicons;
  font-size:20px;
  line-height:1;
  color:#3572C9;
  -webkit-font-smoothing:antialiased;
}
li.brm-mega .mm-ic-home  > a::before{ content:"\f102"; }
li.brm-mega .mm-ic-first > a::before{ content:"\f336"; }
li.brm-mega .mm-ic-bank  > a::before{ content:"\f512"; }
li.brm-mega .mm-ic-map   > a::before{ content:"\f231"; }
li.brm-mega .mm-ic-pin   > a::before{ content:"\f230"; }
li.brm-mega .mm-ic-calc  > a::before{ content:"\f185"; }
li.brm-mega .mm-ic-dp    > a::before{ content:"\f184"; }

/* "Talk to Sean" CTA rail */
.mm-cta{ flex:0 0 300px; }
.mm-cta-card{
  background:#042C53;
  border-radius:12px;
  padding:18px 22px 20px;
  height:100%;
  display:flex;
  flex-direction:column;
  justify-content:center;
}
.mm-cta-photo{
  display:block;
  width:116px;
  max-width:100%;
  height:auto;
  margin:-6px 0 2px -8px;
}
.mm-cta-eyebrow{ color:#F9AC1B; font-size:11px; font-weight:800; letter-spacing:.09em; text-transform:uppercase; margin-bottom:5px; }
.mm-cta-title{ color:#fff; font-size:17px; font-weight:800; margin-bottom:6px; }
.mm-cta-sub{ color:#cdddf4; font-size:12.5px; line-height:1.45; margin-bottom:13px; }
.mm-cta-btn{ display:inline-block; background:#F9AC1B; color:#042C53 !important; font-weight:800; font-size:13.5px; padding:10px 16px; border-radius:8px; text-decoration:none !important; text-align:center; }
.mm-cta-btn:hover{ background:#ffbd3d; }
.mm-cta-phone{ color:#8fb0d6; font-size:12px; margin-top:11px; }

/* mobile: stack into a simple list, no breakout */
@media(max-width:991px){
  li.brm-mega > .dropdown-menu{ box-shadow:none; border-top:0; }
  .mm-inner{ flex-direction:column; gap:18px; padding:8px 4px 12px 12px; }
  .mm-cta{ flex:1 1 auto; }
  .mm-cta-card{ padding:18px 18px 20px; }
}

/* ---- Homepage hero scaled down (CSS preview; final home is Kadence). DESKTOP ONLY:
   the hero collapses to one column at <=1024px, where these tweaks would overlap the text,
   so below that we fall back to Kadence's native responsive layout. ---- */
@media(min-width:1025px){
  .kb-row-layout-id6_03057e-6b > .kt-row-column-wrap{
    padding-top:1.75rem !important;
    padding-bottom:2.25rem !important;
    row-gap:1.75rem !important;
  }
  .kt-adv-heading6_407ee9-5e{ font-size:40px !important; line-height:1.06 !important; }
  /* shrink the B-masked photo (svg mask + woman scale together) + re-seat the review cards */
  .kb-image6_70d397-c4,
  .kb-image6_70d397-c4 .kb-image-is-ratio-size{ max-width:467px !important; }
  .kb-row-layout-id6_921f2d-35 > .kt-row-column-wrap{ margin-bottom:-140px !important; }
  .kb-row-layout-id6_6a9ac8-f6 > .kt-row-column-wrap{ margin-top:-175px !important; }
  /* nudge the whole group (photo + both cards) up & slightly right, kept in-frame */
  .kadence-column6_54af7a-f8 > .kt-inside-inner-col{ transform:translate(50px,-90px) !important; }
}

/* Reserve scrollbar space so the (full-width) header doesn't shift when page height changes
   (calc pages grow/shrink as results render — the classic "header bounce"). */
html{scrollbar-gutter:stable}

/* Homepage hero rotation — clone frames stack over the base masked image and crossfade. */
.brm-hero-rot{position:relative}
.brm-hero-rot img.brm-hero-frame{
  position:absolute;
  inset:0;
  width:100%;
  height:100%;
  object-fit:cover;
  opacity:0;
  transition:opacity 1.2s ease;
}

/* Keep the top bar on one line now that Calculators joined it. */
@media(min-width:992px) and (max-width:1420px){
  #menu-main-menu > li > a.nav-link{padding-left:.6rem !important;padding-right:.6rem !important;font-size:15px}
}

/* ---- Mobile nav: full-screen solid panel instead of a transparent floating list ---- */
@media(max-width:991px){
  #site-header-nav-menus.collapse.show,
  #site-header-nav-menus.collapsing{
    position:fixed;
    left:0; right:0; bottom:0;
    top:0;
    background:#fff;
    z-index:1040;
    overflow-y:auto;
    -webkit-overflow-scrolling:touch;
    padding:96px 26px 40px;
  }
  /* keep the logo + close X visible and clickable above the panel
     (the collapse is a descendant of the header, so lift its siblings) */
  #site-header{position:relative;z-index:1050}
  #site-header .logo-set,
  #site-header .navbar-toggler{position:relative;z-index:1060}
  /* compact, readable items */
  #site-header-nav-menus #menu-main-menu > li{border-bottom:1px solid #e8edf4;margin:0}
  #site-header-nav-menus #menu-main-menu > li > a.nav-link{
    display:block;padding:16px 2px !important;font-size:18px;font-weight:700;color:#0d2748;
  }
  #site-header-nav-menus .dropdown-menu{position:static;float:none;box-shadow:none;border:0;padding:0 0 10px}
  #site-header-nav-menus .mm-inner{padding:0 0 4px 6px;gap:12px}
  #site-header-nav-menus li.brm-mega .mm-col .dropdown-item{padding:11px 10px 11px 40px !important;font-size:15.5px}
  #site-header-nav-menus .mm-col-h{padding-top:6px}
  /* utility bits that render inside the collapse */
  #site-header-nav-menus .nav-container{margin:0}
}