/* =========================================================================
   bwise360 - site-wide fixes
   1) Desktop hover-to-open mega menus (click still works on touch/mobile)
   2) Mobile responsive grid corrections for sections that don't stack
      cleanly on small screens
   ========================================================================= */

/* ---------- 1. Hover-to-open dropdown / mega menus (desktop only) ---------- */
@media (min-width: 992px) {
  .navbar .nav-item.dropdown { position: relative; }

  /* Show on hover of the trigger or the menu itself, so moving the mouse
     from the link into the menu doesn't close it. */
  .navbar .nav-item.dropdown:hover > .dropdown-menu {
    display: block;
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
    pointer-events: auto;
  }

  .navbar .dropdown-menu {
    /* Prep for a smooth open instead of an instant snap */
    display: block;
    opacity: 0;
    visibility: hidden;
    transform: translateY(8px);
    pointer-events: none;
    transition: opacity .15s ease, transform .15s ease, visibility 0s linear .15s;
    margin-top: 0 !important;
  }

  .navbar .nav-item.dropdown:hover > .dropdown-menu {
    transition: opacity .15s ease, transform .15s ease, visibility 0s linear 0s;
  }

  /* Keep Bootstrap's own JS-driven .show state working too (click still opens) */
  .navbar .dropdown-menu.show {
    display: block;
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
    pointer-events: auto;
  }
}

/* On touch/mobile the menus behave as normal Bootstrap collapse/click menus
   - no hover simulation, since there's no hover on touch devices. */
@media (max-width: 991.98px) {
  .navbar .dropdown-menu {
    position: static !important;
    display: none;
    opacity: 1 !important;
    visibility: visible !important;
    transform: none !important;
    pointer-events: auto !important;
    transition: none !important;
    box-shadow: none !important;
    padding: .25rem 0 .75rem !important;
    background: var(--bw-paper, #F7F5EF) !important;
    border-radius: 8px;
    margin: .25rem 0 .5rem !important;
  }
  .navbar .dropdown-menu.show { display: block !important; }
  .mega-promo { display: none !important; }
  .mega-col-title { margin-top: .5rem; }
  .mega-menu .dropdown-item { padding: .6rem .5rem; border-left: none; }
}

/* ---------- 1b. Mobile nav shell: sizing, tap targets, scroll ---------- */
@media (max-width: 991.98px) {
  .site-nav { padding-top: .6rem !important; padding-bottom: .6rem !important; }
  .site-nav .navbar-brand img { height: 68px; }
  .site-nav .navbar-collapse {
    max-height: calc(100vh - 72px);
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
  }
  .site-nav .nav-link,
  .site-nav .dropdown-toggle {
    padding-top: .65rem; padding-bottom: .65rem;
    font-size: 1rem;
  }
  .site-nav .btn-bw-primary { width: 100%; text-align: center; }
  .navbar-toggler { min-width: 44px; min-height: 44px; }
}

/* ---------- 2. Mobile grid / layout corrections ---------- */
@media (max-width: 991.98px) {
  /* Any row that was forced into a fixed multi-column layout with inline
     widths or flex-basis should stack on tablets/phones. */
  .row { row-gap: 1.25rem; }

  /* Mega-menu columns: force single column stacking inside the open menu */
  .mega-menu .row > [class*="col-"] {
    flex: 0 0 100%;
    max-width: 100%;
    width: 100%;
  }

  /* Generic 2/3/4-up feature & card grids should collapse to 1 column on
     phones and 2 columns on tablets, never stay 3–4 across. */
  .row.g-4 > [class*="col-md-3"],
  .row.g-4 > [class*="col-md-4"],
  .row.g-4 > [class*="col-lg-3"],
  .row.g-4 > [class*="col-lg-4"] {
    flex: 0 0 50%;
    max-width: 50%;
  }

  /* Headings shouldn't overflow narrow viewports */
  h1, .display-1, .display-2, .display-3, .display-4 { word-break: break-word; }
}

@media (max-width: 575.98px) {
  .row.g-4 > [class*="col-md-3"],
  .row.g-4 > [class*="col-md-4"],
  .row.g-4 > [class*="col-lg-3"],
  .row.g-4 > [class*="col-lg-4"],
  .row.g-4 > [class*="col-sm-6"],
  .row.g-4 > [class*="col-6"] {
    flex: 0 0 100%;
    max-width: 100%;
  }

  /* Prevent any fixed-width blocks (hero art, stat blocks, etc.) from
     overflowing the viewport and breaking horizontal scroll. */
  img, svg, video, iframe, table { max-width: 100%; height: auto; }
  .container, .container-fluid { padding-left: 16px; padding-right: 16px; }

  /* Two-column form rows (name/company, email/phone) stack on phones */
  .s24, .s29 { display: flex; flex-direction: column; gap: 1rem; }

  /* Buttons that sit side-by-side in a CTA row stack full-width on phones */
  .d-flex.gap-3 > .btn,
  .d-flex.gap-2 > .btn { flex: 1 1 100%; }

  /* Large display headings scale down so they don't wrap awkwardly */
  .display-1 { font-size: 2.4rem !important; }
  .display-2 { font-size: 2.1rem !important; }
  .display-3 { font-size: 1.85rem !important; }
  .display-4 { font-size: 1.6rem !important; }

  /* Any wide data table scrolls horizontally instead of breaking layout */
  table { display: block; overflow-x: auto; white-space: nowrap; }
}

/* Never allow horizontal overflow from wide fixed-width elements */
html, body { overflow-x: hidden; }

/* ---------- 2b. Home page (index.php) grid sections that don't stack ----------
   These sections use raw inline CSS Grid with fixed multi-column tracks
   (no auto-fit/auto-fill), so unlike the rest of the site they need explicit
   breakpoint overrides here to collapse cleanly on tablets and phones. */
@media (max-width: 991.98px) {
  .bw-grid-hero { grid-template-columns: 1fr !important; gap: 40px !important; }
  .bw-grid-tracks2 { grid-template-columns: 1fr !important; gap: 20px !important; }
  .bw-grid-reg2 { grid-template-columns: 1fr !important; gap: 32px !important; }
  .bw-grid-stats5 { grid-template-columns: repeat(3, minmax(0,1fr)) !important; row-gap: 20px !important; }
}
@media (max-width: 767.98px) {
  .bw-grid-stats5 { grid-template-columns: repeat(2, minmax(0,1fr)) !important; row-gap: 20px !important; }
}
@media (max-width: 575.98px) {
  .bw-grid-stats5 { grid-template-columns: 1fr !important; }
  .bw-grid-stats5 > div { border-right: none !important; border-bottom: 1px solid rgba(255,255,255,0.18); padding: 14px 0 !important; }
  .bw-grid-stats5 > div:last-child { border-bottom: none; }
}

/* Home hero: fixed 58px/40px headline and 84px/40px section padding are
   too large once the grid above stacks to a single column on phones. */
@media (max-width: 767.98px) {
  [data-screen-label="Hero"] { padding: 48px 20px 56px !important; }
  [data-screen-label="Hero"] h1 { font-size: 34px !important; line-height: 1.18 !important; }
  [data-screen-label="Hero"] h1 span { font-size: 24px !important; }
  [data-screen-label="Hero"] .hero-maze,
  [data-screen-label="Hero"] > div[style*="border-radius:50%"] { display: none !important; }
}
@media (max-width: 575.98px) {
  [data-screen-label] { padding-left: 20px !important; padding-right: 20px !important; }
  [data-screen-label="Fact bar"] { padding-top: 26px !important; padding-bottom: 26px !important; }
}

/* ---------- 3. Form error messages ---------- */
.field-error {
  display: none;
  color: #D64545;
  font-size: .78rem;
  font-weight: 600;
  margin-top: 6px;
}
.field-error.show { display: block; }
.form-field.has-error input,
.form-field.has-error select,
.form-field.has-error textarea {
  border-color: #D64545 !important;
  box-shadow: 0 0 0 3px rgba(214,69,69,.12);
}
.form-success-msg {
  display: none;
  background: #E7F7F0;
  color: #0F7B4F;
  border: 1px solid #A9E6C9;
  border-radius: 6px;
  padding: 12px 14px;
  font-size: .85rem;
  font-weight: 600;
  margin-top: 14px;
}
.form-success-msg.show { display: block; }
.form-error-msg {
  display: none;
  background: #FDECEC;
  color: #B42318;
  border: 1px solid #F5B5B5;
  border-radius: 6px;
  padding: 12px 14px;
  font-size: .85rem;
  font-weight: 600;
  margin-bottom: 14px;
}
.form-error-msg.show { display: block; }
button[disabled].btn-bw-primary,
button[disabled].btn-bw-primary:hover,
button[disabled].btn-bw-primary:focus {
  opacity: .65;
  cursor: not-allowed;
  background: var(--bw-orange);
  color: #fff;
  border: 0;
}
button[disabled].btn-bw-secondary,
button[disabled].btn-bw-secondary:hover,
button[disabled].btn-bw-secondary:focus {
  opacity: .65;
  cursor: not-allowed;
  background: var(--bw-blue);
  color: #fff;
  border: 0;
}