/* ============================================================
   BIZCA — Mobile UX layer (v2.3.0)
   Loaded LAST, site-wide. Emerald brand #00BF6F / deep #173F35.
   Goals: kill horizontal scroll, a calm collapsible drawer nav,
   comfortable tap targets, tidy mobile spacing. CSS-only + tiny JS.
   ============================================================ */

/* ---- 0. Global safety: never scroll sideways on a phone ---- */
html, body { max-width: 100%; overflow-x: hidden; }
.bb-wrap, .container, .footer-inner, .navbar-inner, .bizca-page { max-width: 100%; }

/* ---- 1. Hand-authored inline grids must collapse on mobile ---- */
/* Inline style="grid-template-columns:repeat(4,1fr)" beats the theme
   media query, so re-assert it with !important. */
@media (max-width: 992px){
  .bb-feats { grid-template-columns: 1fr 1fr !important; }
}
@media (max-width: 560px){
  .bb-feats { grid-template-columns: 1fr !important; }
  /* Safety net: any hand-authored inline column grid on a marketing page
     (repeat(4,1fr), 0.9fr 1.1fr, etc.) stacks to a single column on phones. */
  .bizca-page [style*="grid-template-columns"] { grid-template-columns: 1fr !important; }
}

/* ============================================================
   2. MOBILE NAV DRAWER
   ============================================================ */

/* On-brand hamburger (kills the red default), 44px tap target */
.bizca-navbar .navbar-toggle{
  background: #fff !important;
  color: var(--bb-navy, #173F35) !important;
  border: 1.5px solid #e3e8ee !important;
  border-radius: 12px !important;
  width: 44px; height: 44px; padding: 0;
  align-items: center; justify-content: center;
  font-size: 22px; line-height: 1;
  box-shadow: 0 2px 8px rgba(23,63,53,.06);
}

/* Wrapper is transparent on desktop; head + overlay hidden */
.bizca-drawer { display: contents; }
.bizca-drawer-head, .bizca-drawer-overlay { display: none; }

@media (max-width: 992px){
  .bizca-navbar .navbar-toggle{ display: inline-flex; }

  /* the wrapper becomes a right-side sliding panel */
  .bizca-drawer{
    display: flex; flex-direction: column;
    position: fixed; top: 0; right: 0;
    height: 100vh; height: 100dvh;
    width: 86vw; max-width: 360px;
    background: #fff; z-index: 3000;
    transform: translateX(101%);
    transition: transform .28s ease;
    box-shadow: -14px 0 46px rgba(15,43,36,.22);
    overflow-y: auto; -webkit-overflow-scrolling: touch;
  }
  body.bizca-nav-open .bizca-drawer{ transform: translateX(0); }
  /* The navbar's own z-index:1000 creates a stacking context that trapped
     the drawer BELOW the root-level overlay — every tap landed on the
     overlay (buttons looked dimmed and un-clickable). Lift the navbar
     context above the overlay while the drawer is open. */
  body.bizca-nav-open .bizca-navbar{ z-index: 3001; }

  .bizca-drawer-overlay{
    display: block; position: fixed; inset: 0;
    background: rgba(15,43,36,.5); z-index: 2999;
    opacity: 0; visibility: hidden;
    transition: opacity .28s ease, visibility .28s ease;
  }
  body.bizca-nav-open .bizca-drawer-overlay{ opacity: 1; visibility: visible; }
  body.bizca-nav-open{ overflow: hidden; }
  /* keep the sticky bottom CTA + chat button out of the way while open */
  body.bizca-nav-open .float-chat-btn,
  body.bizca-nav-open .bizca-mcta{ display: none !important; }

  .bizca-drawer-head{
    display: flex; align-items: center; justify-content: space-between;
    padding: 15px 18px; border-bottom: 1px solid #eef2f6;
    position: sticky; top: 0; background: #fff; z-index: 2;
  }
  .bizca-drawer-title{
    font-weight: 800; color: var(--bb-navy,#173F35);
    font-size: 15px; letter-spacing: .3px;
    display: inline-flex; align-items: center; gap: 8px;
  }
  .bizca-drawer-title .dot{
    width: 22px; height: 22px; border-radius: 7px;
    background: linear-gradient(135deg, var(--bb-gold,#00BF6F), var(--bb-gold-d,#017A49));
    color:#fff; font-weight:900; font-size:12px;
    display:inline-flex; align-items:center; justify-content:center;
  }
  .bizca-drawer-close{
    background: #f4f7f9 !important; color: var(--bb-navy,#173F35) !important;
    border: none !important; border-radius: 10px !important;
    width: 40px; height: 40px; padding: 0;
    display: flex; align-items: center; justify-content: center; font-size: 18px;
  }

  /* CTA buttons pinned near the top of the drawer */
  .bizca-drawer-cta{
    display: flex !important; flex-direction: column; gap: 10px;
    padding: 16px 18px; order: 1;
    border-bottom: 1px solid #eef2f6;
    position: static; background: transparent; inset: auto;
  }
  .bizca-drawer-cta .btn{
    width: 100%; justify-content: center;
    padding: 13px 18px; font-size: 15px; border-radius: 12px; min-height: 48px;
    color: inherit;
  }
  .bizca-drawer-cta .btn-ghost{
    color: var(--bb-navy,#173F35) !important;
    border: 1.5px solid #e3e8ee; background: #fff;
  }

  /* the menu list */
  .bizca-drawer .navbar-menu{
    display: flex !important; flex-direction: column;
    position: static; inset: auto; transform: none;
    background: transparent; border: none; box-shadow: none;
    padding: 8px 12px 40px; gap: 2px; margin: 0; width: auto;
    order: 2;
  }
  .bizca-drawer .navbar-menu > li{ width: 100%; }
  .bizca-drawer .navbar-menu > li > a{
    display: flex; align-items: center; justify-content: space-between; gap: 10px;
    padding: 13px 14px; min-height: 48px; border-radius: 12px;
    color: #16352c; font-size: 15.5px; font-weight: 600;
  }
  .bizca-drawer .navbar-menu > li > a:hover,
  .bizca-drawer .navbar-menu > li > a:focus-visible{
    background: #f1f8f4; color: var(--bb-gold-d,#017A49);
  }
  .bizca-drawer .navbar-menu > li > a.active{
    background: #eafaf1; color: var(--bb-gold-d,#017A49);
  }
  /* drop the desktop underline indicator inside the drawer */
  .bizca-drawer .navbar-menu a.active::after{ display: none !important; }

  /* accordion sub-menus: collapsed until the parent row is tapped */
  .bizca-drawer .navbar-menu .dd{
    display: none !important;
    position: static !important; transform: none !important;
    opacity: 1 !important; visibility: visible !important;
    box-shadow: none !important; border: none !important;
    background: #f7faf8 !important; border-radius: 12px !important;
    padding: 4px !important; margin: 2px 0 6px !important; min-width: 0 !important;
  }
  .bizca-drawer .navbar-menu .has-dd.dd-open > .dd{ display: block !important; }
  .bizca-drawer .navbar-menu .dd a{
    display: flex; align-items: center; min-height: 44px;
    padding: 10px 14px; border-radius: 9px;
    font-size: 14.5px; color: #3a4a44; font-weight: 500;
  }
  .bizca-drawer .navbar-menu .dd a:hover{ background:#eef6f1; color: var(--bb-gold-d,#017A49); }
  .bizca-drawer .navbar-menu .has-dd > a .bi-chevron-down{ transition: transform .2s ease; font-size: 12px; opacity:.7; }
  .bizca-drawer .navbar-menu .has-dd.dd-open > a{ background:#f1f8f4; color: var(--bb-gold-d,#017A49); }
  .bizca-drawer .navbar-menu .has-dd.dd-open > a .bi-chevron-down{ transform: rotate(180deg); }
}

/* ============================================================
   2b. Community / BuddyPress pages (BuddyX parent header)
   The parent .container was pinned to width:1140px, so on phones
   the whole header + member directory rendered at desktop width
   and clipped off-screen. Make it fluid on mobile so BuddyX's own
   responsive header + native mobile menu fall into place.
   ============================================================ */
@media (max-width: 992px){
  .container{ width: 100% !important; max-width: 100% !important; }
}

/* ============================================================
   3. HERO + social-proof polish (mobile)
   ============================================================ */
@media (max-width: 560px){
  .bb-hero .bb-wrap{ padding-top: 42px; padding-bottom: 44px; }
  .bb-hero h1{ font-size: 33px; letter-spacing: -.5px; }
  .bb-hero p.sub{ font-size: 16px; }
  /* labelled circles were overlapping and clipping their text */
  .bb-ava span{ width: 40px; height: 40px; margin-left: -6px; font-size: 11px; }
  .bb-ava span:first-child{ margin-left: 0; }
}

/* ============================================================
   4. Quality floor
   ============================================================ */
a:focus-visible, button:focus-visible, input:focus-visible,
.btn:focus-visible, .bb-pill:focus-visible{
  outline: 3px solid rgba(0,191,111,.45); outline-offset: 2px; border-radius: 8px;
}
@media (max-width: 560px){
  .btn, .bb-pill{ min-height: 46px; }
  /* lift the chat button above the sticky CTA bar so they do not stack */
  .float-chat-btn{ bottom: 78px; }
}
@media (prefers-reduced-motion: reduce){
  *, *::before, *::after{
    animation-duration: .001ms !important;
    transition-duration: .001ms !important;
    scroll-behavior: auto !important;
  }
}

/* ============================================================
   5. Community chrome polish (BuddyX header / menu / breadcrumbs)
   ============================================================ */
/* dark-mode toggle does nothing under the pinned light brand CSS — hide the dead control */
.bx-color-mode-toggle{ display: none !important; }
/* theme credit in the community footer */
.site-info .powered-by{ display: none !important; }
/* breadcrumbs were coral red — bring them on brand */
.buddyx-breadcrumbs{ color: #94a3b8; }
.buddyx-breadcrumbs a{ color: var(--bb-gold-d,#017A49) !important; }

@media (max-width: 600px){
  /* the two-line tagline crowds the small community header */
  .site-header .site-description{ display: none !important; }
}

/* BuddyX slide-in mobile menu: black bar + 12px links -> clean brand panel */
@media (max-width: 992px){
  .buddyx-mobile-menu{ background: #fff !important; }
  .buddyx-mobile-menu .mobile-menu-heading{
    background: #fff !important;
    border-bottom: 1px solid #eef2f6;
    padding: 16px 18px !important;
    align-items: center;
  }
  .buddyx-mobile-menu .menu-title{
    color: var(--bb-navy,#173F35) !important;
    font-size: 16px !important; font-weight: 800 !important;
    letter-spacing: .3px; margin: 0 !important;
  }
  .buddyx-mobile-menu .menu-close{
    background: #f4f7f9 !important; color: var(--bb-navy,#173F35) !important;
    border-radius: 10px !important; padding: 8px 14px !important;
    font-weight: 700; font-size: 13px !important; text-decoration: none;
  }
  .buddyx-mobile-menu .menu{ padding: 8px 10px !important; }
  .buddyx-mobile-menu .menu a{
    font-size: 15px !important; color: #16352c !important;
    display: flex; align-items: center; min-height: 46px;
    padding: 11px 14px !important; border-radius: 10px;
  }
  .buddyx-mobile-menu .menu a:hover{
    background: #f1f8f4; color: var(--bb-gold-d,#017A49) !important;
  }
  /* the parent theme leaves the open panel 44px tall, so its links were
     never visible — make the open state a proper full-height sheet */
  body.mobile-menu-opened .buddyx-mobile-menu{
    height: calc(100dvh - 70px) !important;
    overflow-y: auto !important;
    border-radius: 0 0 0 16px;
    box-shadow: -14px 0 46px rgba(15,43,36,.22);
  }
}

/* Community footer credit: raw "Powered by BuddyX" text node — swap for a
   clean brand line (the text sits outside any hideable element). */
.site-footer .site-info .container{ font-size: 0 !important; }
.site-footer .site-info .container a{ display: none !important; }
.site-footer .site-info .container::after{
  content: "© 2026 BIZCA — Business Connect Agent · MST 0318942316";
  font-size: 13px; color: rgba(255,255,255,.7); display: block; padding: 2px 0;
}

/* WP caps-lock hint ships without its toggle script on the BP register
   page, so it rendered permanently as a giant unconstrained SVG triangle. */
.caps-warning{ display: none !important; }

/* iPad / touch at desktop width: dropdown opened by tap (see bizca-mobile.js) */
.bizca-navbar .navbar-menu .has-dd.tap-open .dd{
  opacity: 1 !important; visibility: visible !important;
  transform: translateX(-50%) translateY(0) !important;
}

/* ============================================================
   5b. Brand completion — leftovers from the gold->emerald recolor
   ============================================================ */
/* section-header squiggle ships as inline SVG with stroke="#D4AF37" */
.bb-squig path{ stroke: var(--bb-gold,#00BF6F) !important; }

/* ============================================================
   5c. Rewards bars: flex row collapsed into a one-word-per-line
   column on phones — stack them properly instead
   ============================================================ */
@media (max-width: 600px){
  .bb-bar{
    flex-direction: column; align-items: flex-start;
    gap: 12px; padding: 20px; border-radius: 20px;
  }
  .bb-bar .more{ margin-left: 0; }
}

/* ============================================================
   5d. iOS form zoom: any control under 16px makes Safari zoom the
   whole page on focus — pin 16px on touch widths
   ============================================================ */
@media (max-width: 768px){
  input[type="text"], input[type="email"], input[type="tel"],
  input[type="password"], input[type="search"], input[type="url"],
  input[type="number"], select, textarea{
    font-size: 16px !important;
  }
}

/* ============================================================
   6. Rhythm + overlap fixes
   ============================================================ */
/* chat button sat on the sticky CTA bar in the 561-768px range */
@media (max-width: 768px){ .float-chat-btn{ bottom: 78px; } }
/* calmer section rhythm on phones (84-96px paddings are desktop scale) */
@media (max-width: 560px){
  .bb-sec{ padding: 52px 0; }
  .section{ padding: 52px 0; }
  .section-lg{ padding: 64px 0; }
}
/* footer: brand block full width, link columns pair up (was one long list) */
@media (max-width: 600px){
  .footer-grid{ grid-template-columns: 1fr 1fr !important; gap: 26px 20px; }
  .footer-brand{ grid-column: 1 / -1; }
}
/* iPhone home-indicator safe area under the sticky CTA bar; the CTA bar
   only exists on marketing pages, so scope the body offset there and
   drop the dead 64px padding community pages were carrying. */
@media (max-width: 768px){
  .bizca-mcta{ padding-bottom: calc(10px + env(safe-area-inset-bottom, 0px)); }
  body{ padding-bottom: 0; }
  body.bizca-marketing{ padding-bottom: calc(64px + env(safe-area-inset-bottom, 0px)); }
}