/* ============================================
   GooseBayRealEstate.ca — Mobile Fixes
   Link AFTER main.css on every page.
   ============================================ */

/* --- Hamburger menu background & layout --- */
@media (max-width: 1024px) {
  .nav-main-bar {
    height: auto;
    min-height: 60px;
    overflow: visible;
  }
  .nav-main-links.open {
    background-color: #ffffff;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
    padding-bottom: 12px;
  }

  /* --- Dropdown tap-to-open (pairs with mobile-nav.js) --- */
  .nav-dropdown:hover > .nav-dropdown-content,
  .nav-dropdown:focus-within > .nav-dropdown-content {
    display: none;             /* disable hover/focus — JS controls visibility */
  }
  .nav-dropdown.open > .nav-dropdown-content {
    display: flex;
    flex-direction: column;
    background: #ffffff;
    padding-left: 16px;
  }
  .nav-dropdown-content a {
    color: #555555;
    padding: 10px 0;
    display: block;
    font-size: 14px;
  }
  .nav-dropdown-content a:hover,
  .nav-dropdown-content a:active {
    color: #EA002A;
    padding-left: 0;
    background: transparent;
  }

  /* Dropdown arrow rotation when open */
  .nav-dropdown.open > a::after {
    transform: rotate(180deg);
    border-top-color: #EA002A;
  }

  /* --- Submenu tap-to-open --- */
  .nav-submenu:hover > .nav-submenu-content {
    display: none;
  }
  .nav-submenu.open > .nav-submenu-content {
    display: flex;
    flex-direction: column;
    background: #f7f7f7;
    padding-left: 16px;
  }

  /* --- CTA buttons visible in mobile menu --- */
  .nav-main-links.open ~ .nav-main-right {
    display: flex;
  }
}

/* --- "FREE EVALUATION" button visibility --- */
.nav-cta-outline {
  background-color: #ffffff;
}

/* --- Phone number wrapping fix --- */
@media (max-width: 480px) {
  .nav-phone-pill {
    white-space: nowrap;
    padding: 8px 14px 8px 10px;
  }
  .nav-phone-pill .nav-phone-num {
    font-size: 12px;
  }
}

/* --- Footer text contrast (WCAG AA) --- */
footer,
.site-footer {
  color: #cccccc;
}

/* --- Prevent horizontal overflow --- */
body {
  overflow-x: hidden;
}

/* --- Grid minmax safety for 390px screens --- */
@media (max-width: 480px) {
  [style*="minmax(300px"],
  [style*="minmax(280px"] {
    grid-template-columns: 1fr !important;
  }
  /* Force 2-column inline grids to stack on narrow phones */
  [style*="grid-template-columns:1fr 1fr"],
  [style*="grid-template-columns: 1fr 1fr"] {
    grid-template-columns: 1fr !important;
  }
}