/* ============================================
   The Code Deck — Mobile Responsive Styles
   Injected into all pages via <link rel="stylesheet" href="/mobile.css">
   ============================================ */

/* HAMBURGER MENU */
.nav-toggle {
  display: none;
  flex-direction: column;
  gap: 5px;
  cursor: pointer;
  padding: 8px;
  border: none;
  background: none;
  z-index: 300;
}
.nav-toggle span {
  display: block;
  width: 22px;
  height: 2px;
  background: var(--text, #111);
  border-radius: 2px;
  transition: all 0.25s;
}
.nav-toggle.open span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.nav-toggle.open span:nth-child(2) { opacity: 0; }
.nav-toggle.open span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

@media (max-width: 768px) {
  /* NAV */
  nav {
    padding: 0 1.25rem !important;
    height: 54px !important;
    position: sticky !important;
    top: 0 !important;
    z-index: 200 !important;
  }
  .nav-links {
    display: none !important;
    position: fixed !important;
    top: 54px !important;
    left: 0 !important;
    right: 0 !important;
    background: rgba(249,249,247,0.98) !important;
    backdrop-filter: blur(16px) !important;
    flex-direction: column !important;
    gap: 0 !important;
    padding: 0.5rem 0 1rem !important;
    border-bottom: 1px solid var(--border, #e6e6e2) !important;
    box-shadow: 0 8px 24px rgba(0,0,0,0.08) !important;
    z-index: 199 !important;
  }
  .nav-links.open {
    display: flex !important;
  }
  .nav-links a {
    padding: 0.85rem 1.5rem !important;
    font-size: 1rem !important;
    border-bottom: 1px solid var(--border, #e6e6e2) !important;
  }
  .nav-links a:last-child { border-bottom: none !important; }
  .nav-r { display: none !important; }
  .nav-toggle { display: flex !important; }

  /* HOMEPAGE HERO */
  .hero { padding: 2rem 1.25rem 1.5rem !important; }
  h1 { font-size: clamp(1.9rem, 8vw, 2.5rem) !important; }
  .hero-sub { font-size: 0.9rem !important; }
  .search-row { flex-direction: column !important; gap: 8px !important; }
  .search-wrap { border-radius: 12px !important; }
  .filter-row { gap: 5px !important; flex-wrap: wrap !important; }
  .fpill { font-size: 0.75rem !important; padding: 4px 11px !important; }

  /* STATS BAR */
  .stats-bar, [class*="stats"] > div, .stat-grid {
    grid-template-columns: repeat(2, 1fr) !important;
  }

  /* HOMEPAGE SECTIONS */
  .controls { padding: 0 1.25rem 1.5rem !important; }
  .results-bar { padding: 0 1.25rem 0.75rem !important; }
  .jobs-wrap { padding: 0 1.25rem 4rem !important; }

  /* JOB CARDS */
  .jcard {
    grid-template-columns: auto 1fr !important;
    gap: 0.75rem !important;
    padding: 0.9rem 1rem !important;
  }
  .jright { flex-direction: row !important; flex-wrap: wrap !important; gap: 4px !important; }
  .apply-btn { display: none !important; }
  .jlogo { width: 34px !important; height: 34px !important; font-size: 0.65rem !important; }
  .jtitle { font-size: 0.85rem !important; }
  .jmeta { font-size: 0.72rem !important; }

  /* COMPANIES GRID */
  .co-grid {
    grid-template-columns: repeat(2, 1fr) !important;
    gap: 0.75rem !important;
    padding: 0 1.25rem !important;
  }
  .co-card { padding: 1rem !important; }
  .co-hero { padding: 1.5rem 1.25rem 1rem !important; }
  .co-header { flex-direction: column !important; gap: 1rem !important; }
  .co-avatar { width: 56px !important; height: 56px !important; }
  .co-name { font-size: 1.6rem !important; }
  .co-stats { gap: 1.25rem !important; }
  .co-cta { flex-wrap: wrap !important; }
  .field-pills { gap: 5px !important; }
  .jobs-section { padding: 0 1.25rem 4rem !important; }
  .jobs-card { border-radius: 14px !important; }

  /* JOB DETAIL */
  .job-layout, .jd-layout {
    grid-template-columns: 1fr !important;
    gap: 1.5rem !important;
    padding: 0 1.25rem !important;
  }
  .jd-sidebar { order: -1 !important; }

  /* CONTACT PAGE */
  .contact-grid, .contact-layout {
    grid-template-columns: 1fr !important;
    gap: 2rem !important;
    padding: 0 1.25rem !important;
  }

  /* ABOUT PAGE */
  .about-grid, .features-grid {
    grid-template-columns: 1fr !important;
    gap: 1rem !important;
  }

  /* FOOTER */
  footer > div {
    flex-direction: column !important;
    gap: 1rem !important;
    padding: 1.5rem 1.25rem !important;
    align-items: flex-start !important;
  }

  /* PAGINATION */
  .pages { flex-wrap: wrap !important; gap: 3px !important; padding: 0 1rem !important; }
  .pg-info { display: none !important; }

  /* BACK BAR */
  .back-bar { padding: 1rem 1.25rem 0 !important; }
}

@media (max-width: 480px) {
  h1 { font-size: clamp(1.7rem, 9vw, 2rem) !important; }
  .co-grid { grid-template-columns: 1fr !important; }
  .hero-badge { font-size: 0.7rem !important; }
}

/* ============================================
   HOMEPAGE SPECIFIC FIXES
   ============================================ */
@media (max-width: 768px) {
  /* Find your field grid */
  .field-grid {
    grid-template-columns: repeat(2, 1fr) !important;
    gap: 0.75rem !important;
    padding: 0 1.25rem !important;
  }
  .field-card {
    padding: 1rem !important;
  }

  /* How it works / Built to run itself */
  .how-grid {
    grid-template-columns: 1fr !important;
    gap: 1rem !important;
    padding: 0 1.25rem !important;
  }
  .how-bg {
    padding: 2rem 1.25rem !important;
  }
  .how-card {
    padding: 1.25rem !important;
  }

  /* CTA / Newsletter / Inbox section */
  .cta-wrap, .cta-box {
    padding: 2rem 1.25rem !important;
    margin: 0 1.25rem !important;
    border-radius: 16px !important;
  }
  .cta-box input, .cta-box button {
    width: 100% !important;
    border-radius: 10px !important;
  }
  .cta-form, .email-form {
    flex-direction: column !important;
    gap: 10px !important;
  }

  /* Featured jobs mock browser section */
  .mock-browser, .browser-mock {
    display: none !important;
  }

  /* Sourcing companies ticker */
  .sourcing-section, .co-ticker {
    padding: 1.5rem 1.25rem !important;
  }

  /* Recent jobs on homepage */
  .recent-jobs, .latest-jobs {
    padding: 0 1.25rem 2rem !important;
  }
  .job-row, .job-preview {
    padding: 0.9rem 1rem !important;
    flex-wrap: wrap !important;
    gap: 0.5rem !important;
  }

  /* Section headings */
  .section-heading, .section-title-lg {
    padding: 0 1.25rem !important;
  }

  /* General section padding */
  section, .section {
    padding-left: 1.25rem !important;
    padding-right: 1.25rem !important;
  }
}

@media (max-width: 480px) {
  .field-grid {
    grid-template-columns: repeat(2, 1fr) !important;
  }
  .cta-box h2, .cta-box h3 {
    font-size: 1.4rem !important;
  }
}

/* ============================================
   OVERFLOW FIXES - prevent horizontal scroll
   ============================================ */
@media (max-width: 768px) {
  html, body {
    overflow-x: hidden !important;
    max-width: 100vw !important;
  }

  /* Mock browser preview - hide on mobile */
  .browser-body, .browser-mock, .mock-wrap {
    display: none !important;
  }

  /* Field grid - 2 columns */
  .field-grid {
    grid-template-columns: repeat(2, 1fr) !important;
    padding: 0 1.25rem !important;
    gap: 0.75rem !important;
    width: 100% !important;
    box-sizing: border-box !important;
  }

  /* How it works grid - 1 column */
  .how-grid {
    grid-template-columns: 1fr !important;
    padding: 0 1.25rem !important;
    gap: 1rem !important;
    width: 100% !important;
    box-sizing: border-box !important;
  }

  /* CTA email box - stack inputs */
  .cta-box {
    padding: 2rem 1.25rem !important;
    margin: 0 1rem !important;
    box-sizing: border-box !important;
  }
  .cta-box form, .cta-form {
    flex-direction: column !important;
    gap: 10px !important;
    width: 100% !important;
  }
  .cta-box input[type="email"] {
    width: 100% !important;
    border-radius: 10px !important;
    box-sizing: border-box !important;
  }
  .cta-box button[type="submit"], .cta-box .btn-subscribe {
    width: 100% !important;
    border-radius: 10px !important;
  }

  /* Job rows on homepage */
  .jrow {
    grid-template-columns: 38px 1fr auto !important;
    padding: 0.8rem 1rem !important;
  }

  /* Fix nav top cutoff - ensure content starts below nav */
  body {
    padding-top: 0 !important;
  }

  /* All sections - prevent overflow */
  .hero, .controls, section, .how-bg, .sourcing,
  .latest, .cta-section, footer {
    max-width: 100vw !important;
    overflow-x: hidden !important;
    box-sizing: border-box !important;
  }

  /* Fix any remaining wide elements */
  * {
    max-width: 100% !important;
    box-sizing: border-box !important;
  }
  img, video, iframe {
    max-width: 100% !important;
  }
}