/* =========================================================
   GBRE — RESPONSIVE / MOBILE NAV FIX
   On mobile (<=980px), the FAQ icon and "List Your Property"
   button move OUT of the top header row and INTO the nav
   toggle drawer (moved by JS in main.js — this file only
   styles them once they're inside the drawer).
   ========================================================= */

/* Container that receives the FAQ + List Property items on mobile.
   Empty / unused on desktop, so it takes no space there. */
.nav-mobile-actions{
  display: none;
}

@media (max-width: 980px){

  /* Hide the icon/button pair from the compact header row on mobile
     — they get physically moved into #navMobileActions by JS instead. */
  .header-actions .icon-btn,
  .header-actions .btn-primary{
    display: none;
  }

  .nav-mobile-actions{
    display: flex;
    flex-direction: column;
    align-items: stretch;
    gap: 14px;
    width: 100%;
    margin-top: 24px;
    padding-top: 24px;
    border-top: 1px solid var(--color-border);
  }

  .nav-mobile-actions .icon-btn{
    display: flex;
    align-items: center;
    justify-content: flex-start;
    gap: 10px;
    width: auto;
    height: auto;
    border-radius: var(--radius-sm);
    padding: 10px 14px;
    font-size: .95rem;
    font-weight: 500;
  }
  .nav-mobile-actions .icon-btn i{
    font-size: 1.1rem;
  }
  .nav-mobile-actions .icon-btn .mobile-label{
    font-size: .95rem;
  }

  .nav-mobile-actions .btn-primary{
    width: 100%;
    text-align: center;
    justify-content: center;
  }

  /* Make sure the drawer content can scroll if it ever gets tall
     on very small screens */
  .main-nav{
    overflow-y: auto;
  }
}

/* Extra small phones — tighten up spacing a little further */
@media (max-width: 420px){
  .main-nav{
    width: 88%;
    padding: 80px 20px 24px;
  }
}