/* ===================================================
   JOBSHUB — RESPONSIVE PATCH
   Loaded after each page's main stylesheet so it can
   safely override/fill gaps without touching the
   original design files.
=================================================== */

/* Job status badge (Active / Expiring Soon / Expired) — computed
   fresh from each job's deadline, not a stored/fake value. */
.job-badge.badge-active,
.job-badge.badge-expiring,
.job-badge.badge-expired {
  position: absolute;
  top: 20px;
  left: 20px;
  padding: 6px 14px;
  border-radius: 999px;
  font-size: 11px;
  font-weight: 600;
  color: #fff;
}

.job-badge.badge-active {
  background: #16a34a;
}

.job-badge.badge-expiring {
  background: #d97706;
}

.job-badge.badge-expired {
  background: #6b7280;
}

/* ===================================================
   ADSENSE-READY AD SLOTS (reserved space, no live ads
   until ADSENSE_ENABLED is turned on in theme.js)
=================================================== */
.ad-slot {
  width: 100%;
  min-height: 100px;
  margin: 24px 0;
  display: block;
}

.ad-slot-placeholder {
  border: 1px dashed rgba(74, 222, 128, 0.25);
  border-radius: 10px;
  background: rgba(255, 255, 255, 0.02);
}

/* ===================================================
   ADMIN PANEL — HAMBURGER MENU FIX
   The hamburger icon had no base styling at all (only a
   tiny <400px sizing tweak existed), and the CSS for
   showing the mobile menu was watching a different
   element than the one the JS actually toggles. This
   makes the hamburger visible + the menu actually open,
   matching the classes admin/js/ui.js already toggles.
=================================================== */
.hamburger {
  display: none;
}

@media (max-width: 992px) {
  .hamburger {
    display: flex !important;
    flex-direction: column;
    justify-content: center;
    gap: 6px;
    width: 32px;
    height: 32px;
    cursor: pointer;
    z-index: 100001;
    position: relative;
  }

  .hamburger span {
    display: block;
    width: 28px;
    height: 3px;
    background: #22c55e;
    border-radius: 5px;
    transition: 0.3s;
  }

  .hamburger.active span:nth-child(1) {
    transform: rotate(45deg) translate(6px, 6px);
  }

  .hamburger.active span:nth-child(2) {
    opacity: 0;
  }

  .hamburger.active span:nth-child(3) {
    transform: rotate(-45deg) translate(7px, -7px);
  }

  #guestMenu,
  #adminMenu {
    display: none !important;
    position: fixed;
    top: 70px;
    left: 0;
    right: 0;
    flex-direction: column;
    background: #0f172a;
    padding: 16px;
    gap: 6px;
    z-index: 99999;
    max-height: calc(100vh - 70px);
    overflow-y: auto;
    box-shadow: 0 12px 24px rgba(0, 0, 0, 0.4);
  }

  #guestMenu.active,
  #adminMenu.active {
    display: flex !important;
  }

  #guestMenu li,
  #adminMenu li {
    width: 100%;
  }

  #guestMenu a,
  #adminMenu a {
    display: block;
    width: 100%;
    box-sizing: border-box;
    padding: 12px 14px;
  }
}

.job-sector-tag {
  font-size: 12px;
  font-weight: 600;
  color: #93c5fd;
  margin: 4px 0 0;
}

/* When a status badge (Active/Expiring/Expired) is also present,
   it's absolutely positioned at the top of the card — push the
   sector tag down so the two don't visually overlap. */
.job-badge + .job-sector-tag {
  margin-top: 38px;
}

/* ===================================================
   HORIZONTAL CAROUSELS (Companies, Team, Testimonials)
   Added as an extra class alongside the existing grid
   classes — no existing CSS files are modified.
=================================================== */
.carousel-wrapper {
  position: relative;
}

.carousel-track {
  display: flex !important;
  flex-wrap: nowrap !important;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
  gap: 20px;
  padding-bottom: 6px;
}

.carousel-track::-webkit-scrollbar {
  display: none;
}

.carousel-track > * {
  flex: 0 0 auto;
  scroll-snap-align: start;
  width: 260px;
}

.carousel-btn {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  z-index: 5;
  width: 42px;
  height: 42px;
  border-radius: 50%;
  background: var(--primary, #22c55e);
  color: #fff;
  border: none;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.25);
}

.carousel-btn.carousel-prev {
  left: -6px;
}

.carousel-btn.carousel-next {
  right: -6px;
}

@media (max-width: 768px) {
  .carousel-btn {
    display: none; /* touch/swipe handles navigation on mobile */
  }
}


html, body {
  overflow-x: hidden;
  max-width: 100%;
}

img, svg, video, iframe {
  max-width: 100%;
  height: auto;
}

* {
  box-sizing: border-box;
}

/* Prevent long unbroken text (emails, links) from
   pushing cards wider than the screen */
p, span, a, li, td, th {
  overflow-wrap: break-word;
  word-break: break-word;
}

/* ---------- TABLET (≤992px) ---------- */
@media (max-width: 992px) {
  .stats-grid,
  .category-grid,
  .team-grid,
  .testimonials-grid,
  .company-grid {
    gap: 18px;
  }
}

/* ---------- MOBILE (≤768px) ---------- */
@media (max-width: 768px) {
  /* Navbar action buttons (Create Account / Subscribe / etc.) are
     moved into the hamburger dropdown by main.js — make sure they
     actually show up there instead of staying hidden. */
  .nav-buttons-wrapper {
    width: 100%;
  }

  .nav-buttons-wrapper .nav-buttons {
    display: flex !important;
    flex-direction: column;
    width: 100%;
    gap: 12px;
    padding: 14px 24px 4px;
  }

  .nav-buttons-wrapper .nav-buttons .btn {
    width: 100%;
    text-align: center;
  }

  .stats-grid {
    grid-template-columns: repeat(2, 1fr);
    gap: 16px;
  }

  .team-grid,
  .testimonials-grid,
  .company-grid,
  .category-grid {
    grid-template-columns: 1fr;
    gap: 18px;
  }

  .stat-card,
  .team-card,
  .testimonial-card,
  .company-card,
  .category-card {
    width: 100% !important;
    max-width: 100%;
    padding: 20px;
  }

  .faq-container {
    max-width: 100%;
    padding: 0 10px;
  }

  .faq-question {
    font-size: 15px;
    padding: 14px 16px;
  }

  .footer-container {
    grid-template-columns: 1fr !important;
    text-align: left;
    gap: 30px;
  }

  .newsletter-box {
    flex-direction: column;
  }

  .newsletter-box input,
  .newsletter-box button {
    width: 100%;
  }

  /* Nav buttons (Create Account / Subscribe) moved inside the
     mobile hamburger menu by theme.js — style them to match the
     dropdown instead of the old desktop pill-button row. */
  .nav-menu-buttons {
    list-style: none;
    width: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 12px;
    margin-top: 16px;
    padding: 0 20px;
  }

  .nav-menu-buttons .nav-buttons {
    display: flex !important;
    flex-direction: column;
    width: 100%;
    gap: 12px;
  }

  .nav-menu-buttons .nav-buttons .btn {
    width: 100%;
    text-align: center;
  }

  /* Admin panel: let wide tables/charts scroll instead of
     squeezing/overflowing the page */
  .admin-table-wrapper,
  table {
    display: block;
    max-width: 100%;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
  }
}

/* ---------- SMALL MOBILE (≤480px) ---------- */
@media (max-width: 480px) {
  .stats-grid {
    grid-template-columns: 1fr;
  }

  .stat-card h3 {
    font-size: 26px;
  }

  .team-card img,
  .company-card img {
    width: 90px;
    height: 90px;
  }

  .job-admin-card,
  .message-card,
  .application-card {
    padding: 14px;
  }

  .contact-form-box,
  .contact-info {
    padding: 18px;
  }
}