/* Notes:
   - The chatbot's position, z-index and sizing are controlled by `assets/js/chatbot.js` and its
     injected styles. Avoid overriding those here to prevent visual/interaction conflicts.
   - We keep small, targeted rules below for footer icon sizing on mobile only. */

/* ✅ Responsive adjustment for mobile */
@media (max-width: 640px) {
  /* avoid overriding chatbot positioning here */
}


/* This CSS creates invisible shields around social links to ensure they're clickable 
   Z-index is set very low (-1) to not interfere with chatbot (z-index: 9999) 
   The shields are placed behind their parent elements to avoid blocking other content */
.footer-link::before,
.group::before,
a[href*="instagram"]::before, 
a[href*="facebook"]::before,
a[href*="linkedin"]::before,
a[href*="twitter"]::before,
a[href*="wa.me"]::before {
  content: '';
  position: absolute;
  top: -10px;
  left: -10px;
  right: -10px;
  bottom: -10px;
  z-index: -1; /* Behind parent, won't conflict with chatbot */
  pointer-events: none; /* Don't block clicks, let parent handle them */
}

/* Make chatbot components have restricted pointer events */
/* don't override chatbot pointer behavior here */

/* Ensures no other elements can accidentally block clicks */
/* Remove the fixed bottom-right helper element so it doesn't accidentally block social icons on small screens */
body::after {
  display: none !important;
  pointer-events: none !important;
  content: none !important;
}

/* Note: chatbot click-shield is managed by the chatbot script. Avoid forcing display/pointer rules here. */

/* Make footer social icons slightly smaller and reduce padding on small screens,
   but keep their colored backgrounds intact. Scoped to footer only. */
@media (max-width: 480px) {
  footer .flex.flex-wrap.justify-end a.footer-link {
    padding: 0.15rem !important; /* reduce heavy padding but keep touch target */
    width: 2.2rem !important;
    height: 2.2rem !important;
    min-width: 2.2rem !important;
    min-height: 2.2rem !important;
    box-shadow: 0 1px 4px rgba(0,0,0,0.06) !important; /* subtle shadow only */
    border-width: 1px !important;
  }

  footer .flex.flex-wrap.justify-end a.footer-link i {
    font-size: 0.95rem !important; /* slightly smaller icon for better proportion */
  }
}

/* Small-screen fixes to prevent chatbot from blocking nearby links and ensure brand visibility */
@media (max-width: 640px) {
  /* When chatbot is closed (translated out / opacity 0) it should not capture pointer events */
  #chatbot-container {
    pointer-events: none !important;
  }
  /* When chatbot is opened by JS it sets transform/opacity inline — enable pointer events then */
  #chatbot-container[style*="translateY(0)"],
  #chatbot-container[style*="opacity: 1"] {
    pointer-events: auto !important;
  }

  /* Slightly reduce toggle/button size on small screens so it doesn't cover nearby links */
  #chatbot-toggle > button {
    width: 2.25rem !important;
    height: 2.25rem !important;
    min-width: 2.25rem !important;
    min-height: 2.25rem !important;
  }

  /* Move toggle slightly up on very small screens to reduce overlap with footer links */
  #chatbot-toggle {
    bottom: 5.75rem !important;
    right: 1rem !important;
    z-index: 40 !important; /* keep below header but above most content */
  }

  /* Ensure site name/brand in the navbar remains visible on small screens */
  nav .font-bold {
    display: inline-block !important;
    white-space: nowrap !important;
    font-size: 1rem !important;
  }
  nav .font-bold span {
    display: inline !important;
  }
}

/* Ensure hamburger/menu is always on top and clickable (minimal, targeted fix) */
#menu-toggle {
  z-index: 11000 !important;
  pointer-events: auto !important;
}

#mobile-menu {
  z-index: 10999 !important;
  pointer-events: auto !important;
}