@import url("https://fonts.googleapis.com/css2?family=DM+Sans:opsz,wght@9..40,300;9..40,400;9..40,500;9..40,600&display=swap");

/* Hide original header sections we don't need */
.mast-head__mobile-top, .mast-head__contact,
.mast-head__search, .mast-head__phone, .mast-head__cta,
.menu-icon { display: none !important; }

/* Fixed white nav bar */
.header-container-wrapper {
  position: fixed !important; top: 0 !important; left: 0 !important; right: 0 !important;
  z-index: 99999 !important; height: 72px !important;
  background: rgba(255,255,255,0.97) !important;
  box-shadow: 0 1px 0 #E0D6CB !important;
  padding: 0 !important; margin: 0 !important;
}

/* Reset all intermediate wrappers — strip blue backgrounds and stray spacing */
.header-container-wrapper .header-container,
.header-container-wrapper .row-fluid-wrapper,
.header-container-wrapper .row-fluid,
.header-container-wrapper .span12,
.header-container-wrapper .hs_cos_wrapper,
.header-container-wrapper header.mast-head,
.header-container-wrapper .mast-head__bottom,
.header-container-wrapper .main {
  height: 100% !important; padding: 0 !important; margin: 0 !important;
  display: block !important; max-width: none !important;
  background: transparent !important;
}

/* --- LOGO LINK ---
   .mast-head__top is repositioned as a 227×36px logo-only overlay.
   Bootstrap column classes on .mast-head__branding set flex-basis:25% and override
   width — so we collapse the entire Bootstrap column stack with display:contents,
   making a.mast-head__logo a direct child of .mast-head__top, free of flex constraints. */
.mast-head__top {
  position: absolute !important;
  top: 50% !important;
  transform: translateY(-50%) !important;
  left: clamp(20px, 5vw, 80px) !important;
  width: 227px !important; height: 36px !important;
  display: block !important;
  background: transparent !important;
  padding: 0 !important; margin: 0 !important;
  overflow: visible !important;
  pointer-events: none !important;
  z-index: 100001 !important;
}

/* Collapse Bootstrap column wrappers — children render as if direct children of .mast-head__top */
.mast-head__top .main,
.mast-head__top .row,
.mast-head__top .mast-head__branding {
  display: contents !important;
}

/* Hide contact column (it floats up to .mast-head__top level via display:contents) */
.mast-head__top .mast-head__contact { display: none !important; }

/* Logo <a>: 227×36px matching homepage exactly, PNG background, clickable */
a.mast-head__logo {
  display: block !important;
  width: 227px !important; height: 36px !important;
  background: url('https://www.vbattorneys.com/hubfs/vb-homepage-v4/nav-logo.png') left center / contain no-repeat !important;
  text-decoration: none !important;
  pointer-events: auto !important;
}
a.mast-head__logo img { display: none !important; }

/* Nav row: flex, links pushed right */
nav.mast-head__menu {
  height: 72px !important; background: transparent !important;
  display: flex !important; align-items: center !important;
  justify-content: flex-end !important;
  padding: 0 clamp(20px, 5vw, 80px) !important;
  max-width: 1380px !important; margin: 0 auto !important;
  box-shadow: none !important; border: none !important; position: static !important;
}

/* ::before logo removed — real <a> link handles it */
nav.mast-head__menu::before { display: none !important; }

/* Nav link list */
ul.mast-head__ul {
  display: flex !important; flex-direction: row !important;
  list-style: none !important; gap: 28px !important;
  align-items: center !important; margin: 0 !important; padding: 0 !important;
  background: transparent !important; position: static !important;
  height: auto !important; border: none !important; box-shadow: none !important;
}

/* Nav link styles */
.mast-head__ul .menu-item a {
  font-family: "DM Sans", "Helvetica Neue", Arial, sans-serif !important;
  font-size: 13px !important; font-weight: 400 !important;
  letter-spacing: 0.03em !important; color: #5A5048 !important;
  text-decoration: none !important; background: transparent !important;
  padding: 0 !important; border: none !important; text-transform: none !important;
  white-space: nowrap !important;
  transition: color 0.2s !important;
}
.mast-head__ul .menu-item a:hover { color: #00022D !important; }

/* Free Consultation CTA button */
.mast-head__ul li:last-child a {
  background: #00022D !important; color: #FFF4EA !important;
  padding: 10px 22px !important; font-size: 12px !important;
  font-weight: 500 !important; letter-spacing: 0.1em !important;
  text-transform: uppercase !important; transition: background 0.25s !important;
  border-radius: 0 !important;
}
.mast-head__ul li:last-child a:hover { background: #161A69 !important; color: #FFF4EA !important; }

/* Push page body below fixed nav */
body { padding-top: 72px !important; margin-top: 0 !important; }

/* ── MOBILE NAVIGATION (≤970px) ──────────────────────────────────── */
@media (max-width: 970px) {

  /* Reveal the hamburger button */
  .menu-icon {
    display: block !important;
    position: absolute !important;
    right: 24px !important;
    top: 50% !important;
    transform: translateY(-50%) !important;
    width: 24px !important; height: 24px !important;
    cursor: pointer !important;
    z-index: 100002 !important;
  }
  .menu-icon .menu-box { width: 24px !important; }
  .menu-icon .menu-box span {
    background: #00022D !important;
    height: 2px !important;
    width: 22px !important;
    display: block !important;
    margin-bottom: 5px !important;
    transition: all 0.3s !important;
  }
  /* X animation when open */
  .menu-icon.active span:first-child {
    transform: rotate(45deg) translateY(8px) translateX(4px) !important;
    margin-bottom: 0 !important;
  }
  .menu-icon.active span:nth-child(2) { opacity: 0 !important; }
  .menu-icon.active span:nth-child(3) {
    transform: rotate(-45deg) translateY(-7px) translateX(4px) !important;
  }

  /* Nav needs relative positioning so the menu can overlay correctly */
  nav.mast-head__menu {
    position: relative !important;
    max-width: none !important;
    width: 100% !important;
    padding: 0 !important;
    height: 72px !important;
    justify-content: flex-start !important;
    overflow: visible !important;
  }

  /* Mobile menu: fixed full-screen navy drawer, hidden off-screen by default */
  ul.mast-head__ul {
    position: fixed !important;
    top: 72px !important;
    left: 0 !important; right: 0 !important; bottom: 0 !important;
    height: auto !important;
    flex-direction: column !important;
    align-items: flex-start !important;
    background: #00022D !important;
    padding: 0 !important;
    gap: 0 !important;
    overflow: hidden !important;
    transform: translateY(-100%) !important;
    transition: transform 0.28s ease !important;
    z-index: 99997 !important;
    box-shadow: none !important;
  }

  /* Menu open: slide drawer into view */
  body.menu-open ul.mast-head__ul {
    transform: translateY(0) !important;
    overflow-y: auto !important;
    padding: 32px !important;
    display: flex !important;
  }

  /* Prevent body scroll while menu is open */
  body.menu-open { overflow: hidden !important; }

  /* Kill HubSpot's white ::after overlay inside the mobile ul */
  ul.mast-head__ul::after { display: none !important; }

  /* Mobile nav links */
  .mast-head__ul .menu-item {
    width: 100% !important;
    background: transparent !important;
    border-bottom: 1px solid rgba(255,255,255,0.08) !important;
  }
  .mast-head__ul .menu-item a {
    color: rgba(255,244,234,0.85) !important;
    font-size: 20px !important;
    font-weight: 300 !important;
    letter-spacing: 0.01em !important;
    padding: 18px 0 !important;
    display: block !important;
    background: transparent !important;
    text-transform: none !important;
    white-space: normal !important;
  }
  .mast-head__ul .menu-item a:hover { color: #FFF4EA !important; }

  /* Free Consultation — gold accent on mobile */
  .mast-head__ul li:last-child {
    border-bottom: none !important;
    margin-top: 12px !important;
  }
  .mast-head__ul li:last-child a {
    color: #B29261 !important;
    background: transparent !important;
    padding: 18px 0 !important;
    font-size: 20px !important;
    font-weight: 300 !important;
    letter-spacing: 0.01em !important;
    text-transform: none !important;
  }
  .mast-head__ul li:last-child a:hover { color: #DEC9AA !important; }
}