/*
 * Responsive fixes - additive layer, loaded after all other CSS.
 * Doesn't modify style.css/plugin.css directly (5000+ lines, high risk to
 * hand-edit); instead patches known mobile/tablet issues on top.
 */

/* Prevent any element from causing horizontal scroll on small screens */
html, body {
  overflow-x: hidden;
  max-width: 100%;
}

/* Images should never overflow their container */
img {
  max-width: 100%;
  height: auto;
}

/* Fix: header.blade.php has an inline `margin-left:120px` on the desktop nav,
   which starts crowding/overflowing the layout on tablet-sized screens before
   SlickNav's own mobile menu takes over at 991px. Neutralise it earlier. */
@media (max-width: 1199px) {
  .header_menu .nav-collapse {
    margin-left: 20px !important;
  }
}

@media (max-width: 991px) {
  .header_menu .nav-collapse {
    margin-left: 0 !important;
  }
}

/* Tables (e.g. job details, admin-style content pasted into descriptions)
   shouldn't force horizontal page scroll - wrap and let them scroll locally */
table {
  max-width: 100%;
  display: block;
  overflow-x: auto;
}

@media (min-width: 768px) {
  table {
    display: table; /* undo the mobile-only wrap on larger screens */
  }
}

/* Forms and buttons: full-width and comfortably tappable on phones */
@media (max-width: 576px) {
  input[type="text"],
  input[type="email"],
  input[type="tel"],
  input[type="number"],
  input[type="date"],
  input[type="password"],
  select,
  textarea {
    width: 100% !important;
    font-size: 16px; /* prevents iOS Safari auto-zoom on focus */
  }

  .job-btn1.btn1,
  .btn1,
  button[type="submit"] {
    width: 100%;
    text-align: center;
  }
}

/* Generic card/grid layouts: stack cleanly on phones instead of squeezing */
@media (max-width: 576px) {
  .row > [class*="col-"] {
    margin-bottom: 16px;
  }
}

/* Long headings/company names wrap instead of overflowing their card on
   narrow screens */
h1, h2, h3, h4, .job-card h3, .card h3, .card h4 {
  overflow-wrap: break-word;
  word-break: break-word;
}

/* Country dropdown / small icon buttons in the nav stay tappable-sized on
   touch devices */
@media (max-width: 991px) {
  .country-globe-btn {
    width: 34px !important;
    height: 34px !important;
  }
}

/* Sticky/floating WhatsApp, Call, Contact buttons (#feedbackw/#feedbackp/#feedbackq
   in bottom.blade.php) - keep them from overlapping page content on small
   screens by giving the page bottom some breathing room */
@media (max-width: 576px) {
  body {
    padding-bottom: 8px;
  }
}

/* Fix: the mobile menu toggle button showed a broken/oversized fallback
   icon glyph (confirmed by screenshot), and my first attempt to fix it by
   relying on the plugin's own internal icon-bar spans produced an empty
   blue box instead - those spans use float/em-based sizing from the
   plugin's base CSS that doesn't play well with a flex-centered button.
   This version stops fighting that: it hides ALL of the plugin's own icon
   markup and draws a single, simple, guaranteed-to-render icon directly on
   the button using CSS box-shadow (three horizontal bars), with zero
   dependency on the plugin's internal DOM/sizing. */
.slicknav_btn {
  width: 36px !important;
  height: 36px !important;
  min-width: 36px;
  min-height: 36px;
  padding: 0 !important;
  margin: 0 0 0 auto !important; /* pushes it to the right, away from the logo */
  position: relative;
  display: block !important;
  background-color: #1967D3;
  border-radius: 4px;
}

.slicknav_btn .slicknav_menutxt,
.slicknav_btn .slicknav_icon,
.slicknav_btn .slicknav_icon-bar {
  display: none !important; /* hide the plugin's own icon markup entirely */
}

.slicknav_btn:before,
.slicknav_btn.slicknav_open:before,
.slicknav_btn.slicknav_collapsed:before {
  content: none !important; /* cancel the broken FontAwesome glyph too */
}

/* Draw the hamburger icon: one bar directly, two more via box-shadow above
   and below it - a single element, centered in the button, no plugin markup
   involved at all */
.slicknav_btn:after {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  width: 18px;
  height: 2px;
  background: #fff;
  box-shadow: 0 -6px 0 #fff, 0 6px 0 #fff;
  transform: translate(-50%, -50%);
  transition: background 0.15s ease-in-out;
}

/* When the menu is open, morph into a clean X instead of 3 bars - using
   only :before/:after, no dependency on the plugin's own markup at all */
.slicknav_btn.slicknav_open:after {
  background: #fff;
  box-shadow: none;
  transform: translate(-50%, -50%) rotate(45deg);
}

.slicknav_btn.slicknav_open:before {
  content: "" !important;
  display: block !important;
  position: absolute;
  top: 50%;
  left: 50%;
  width: 18px;
  height: 2px;
  background: #fff;
  transform: translate(-50%, -50%) rotate(-45deg);
}

#slicknav-mobile {
  display: flex;
  align-items: center;
  margin-left: auto; /* keeps the button pinned to the right edge of the header */
}