/* ============================================================================
   RESPONSIVE OVERRIDES — Mobile-First Optimization
   ============================================================================
   Loaded AFTER style.css, custom-bs.css, and page-specific styles.
   Fixes identified responsive gaps without changing existing desktop layouts.
   ============================================================================ */

/* ===== GLOBAL: prevent overflow on any device ===== */
img, video, iframe, embed, object { max-width: 100%; height: auto; }

/* ===== iOS: prevent auto-zoom on input focus ===== */
@media (max-width: 767.98px) {
  input[type="text"],
  input[type="email"],
  input[type="password"],
  input[type="number"],
  input[type="tel"],
  input[type="url"],
  input[type="search"],
  input[type="date"],
  textarea,
  .form-control,
  .custom-select {
    font-size: 16px !important;
  }
}

/* ==========================================================================
   NAVBAR & HEADER
   ========================================================================== */

/* Mobile menu — cap at viewport width on small phones */
@media (max-width: 360px) {
  .site-mobile-menu { width: 100vw; }
}

/* Hamburger toggle: ensure tap-friendly size */
@media (max-width: 767.98px) {
  .site-navbar .site-menu-toggle {
    font-size: 2rem;
    min-width: 44px;
    min-height: 44px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
  }
}

/* Navbar brand on small phones */
@media (max-width: 420px) {
  .navbar-brand-logo { height: 30px; }
  .navbar-brand-text { font-size: 0.95rem; }
}

/* Notification & user chip compact mode */
@media (max-width: 370px) {
  .btn-post { padding: .35rem .55rem; font-size: .8rem; }
  .btn-post .d-sm-inline { display: none !important; }
  .user-chip .name { display: none; }
  #notifDropdown .dropdown-menu { min-width: 280px; right: -60px !important; }
}

/* ==========================================================================
   HERO SECTION (index.php)
   ========================================================================== */
@media (max-width: 767.98px) {
  .hero-v2 {
    padding-top: 3rem;
    padding-bottom: 2.5rem;
  }
  .hero-title { font-size: 1.75rem; }
  .hero-gradient { font-size: 1.75rem; }
}

@media (max-width: 480px) {
  .hero-v2 {
    padding-top: 2rem;
    padding-bottom: 2rem;
  }
  .hero-title { font-size: 1.5rem; }
  .hero-gradient { font-size: 1.5rem; }
  .hero-badge { font-size: .75rem; padding: .25rem .5rem; }
}

/* Home section heading */
@media (max-width: 575.98px) {
  .home-section h1 { font-size: 1.6rem; }
  .home-section p { font-size: 1rem; }
}

/* ===== Search card on hero ===== */
@media (max-width: 575.98px) {
  .search-card {
    padding: 12px 10px 8px;
    border-radius: 12px;
  }
  .search-card .btn-hero {
    width: 100%;
    margin-top: 6px;
  }
  .search-card .row > [class*="col-"] {
    margin-bottom: 6px;
  }
}

/* ==========================================================================
   JOB CARDS — Index page
   ========================================================================== */
@media (max-width: 480px) {
  .job-link {
    grid-template-columns: 48px 1fr;
    gap: 10px;
    padding: 12px 12px 12px 0;
  }
  .job-media { width: 48px; }
  .job-logo, .job-logo-initial { width: 44px; height: 44px; border-radius: 10px; font-size: 20px; }
  .job-title { font-size: 1rem; }
  .job-meta { font-size: .85rem; gap: 4px; }
  .job-sub { font-size: .82rem; }
  .job-aside { gap: 6px; }
  .due-chip { font-size: .78rem; padding: 4px 8px; }
  .deadline { font-size: .82rem; }
}

/* ==========================================================================
   JOB LISTINGS — Legacy style.css listing layout
   ========================================================================== */

/* Tablet: shrink logo flex basis to avoid horizontal scroll */
@media (max-width: 767.98px) {
  .job-listings .job-listing .job-listing-logo {
    -webkit-box-flex: 0;
    -ms-flex: 0 0 100px;
    flex: 0 0 100px;
  }
  .job-listings .job-listing-position h2 {
    font-size: 1.05rem;
  }
}

/* ==========================================================================
   PAGINATION — Increase tap targets
   ========================================================================== */
.custom-pagination a {
  width: 36px;
  height: 36px;
  line-height: 36px;
}
@media (max-width: 575.98px) {
  .custom-pagination a {
    width: 40px;
    height: 40px;
    line-height: 40px;
    margin: 0 3px;
    font-size: .85rem;
  }
  .custom-pagination a.prev,
  .custom-pagination a.next {
    height: 40px;
    line-height: 40px;
    padding-left: 8px;
    padding-right: 8px;
  }
}

/* Bootstrap pagination tap targets */
@media (max-width: 575.98px) {
  .pagination .page-link {
    min-width: 40px;
    min-height: 40px;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: .35rem .65rem;
  }
}

/* ==========================================================================
   FINDJOBS PAGE
   ========================================================================== */

/* Filter sidebar: collapse at correct breakpoint */
@media (max-width: 767.98px) {
  .fj-results-wrap { grid-template-columns: 1fr; gap: 16px; }
  .fj-filter-col { position: static; }
}

/* Cards: insert intermediate breakpoint */
@media (max-width: 991px) and (min-width: 768px) {
  .fj-grid { grid-template-columns: repeat(2, 1fr); gap: 16px; }
}

/* Cards: mobile */
@media (max-width: 575.98px) {
  .fj-card-link { padding: 14px; }
  .fj-header { grid-template-columns: 44px 1fr; gap: 10px; }
  .fj-avatar, .fj-avatar-img { width: 40px; height: 40px; border-radius: 10px; }
  .fj-type-badge { position: static; margin-top: 6px; }
  .fj-job-title { font-size: .95rem; }
  .fj-meta { font-size: .82rem; }
  .fj-tag { font-size: .72rem; padding: 3px 7px; }
  .fj-sub { font-size: .8rem; gap: 6px; }
  .fj-footer { flex-wrap: wrap; gap: 6px; }
}

/* Hero: mobile padding */
@media (max-width: 575.98px) {
  .fj-hero { padding: 36px 0; }
  .fj-title { font-size: 1.5rem; }
  .fj-subtitle { font-size: .9rem; }
  .fj-searchbar { padding: 12px; margin-top: -20px; border-radius: 12px; }
}

/* ==========================================================================
   FOOTER
   ========================================================================== */
@media (max-width: 575.98px) {
  .modern-footer { padding: 1.25rem 0 0; }
  .footer-social a {
    width: 44px;
    height: 44px;
    margin-right: 8px;
  }
  .modern-footer .ft-head { font-size: .9rem; margin-bottom: 8px; }
  .modern-footer .ft-links { font-size: .85rem; }
  .modern-footer .ft-links li { margin-bottom: 4px; }
}

/* Footer contact address: prevent overflow */
.modern-footer .ft-links span,
.modern-footer .ft-links a {
  word-break: break-word;
  overflow-wrap: anywhere;
}

/* Footer bottom bar */
@media (max-width: 575.98px) {
  .footer-bottom { padding: .75rem 0; font-size: .78rem; }
  .footer-bottom .row { text-align: center; }
  .footer-bottom .col-md-6 { margin-bottom: 4px; }
}

/* ==========================================================================
   EMPLOYER FORMS (employer-forms.css overrides)
   ========================================================================== */

/* Form grid: reduce minmax to prevent overflow on tiny phones */
@media (max-width: 575.98px) {
  .pj-grid {
    grid-template-columns: 1fr !important;
    gap: 1rem;
  }
  .emp-main { padding: .75rem; }
  .emp-main h2, .emp-main h3, .emp-main h4 { font-size: 1.15rem; }
}

@media (max-width: 767.98px) {
  .pj-grid {
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  }
  .salary-row { grid-template-columns: 1fr 1fr; gap: .75rem; }
  .q-row { flex-direction: column; align-items: stretch; gap: .5rem; }
}

/* Employer sidebar collapsed on tablet — ensure usability */
@media (max-width: 991.98px) and (min-width: 576px) {
  .emp-sidebar {
    display: flex;
    flex-wrap: wrap;
    padding: .75rem 1rem;
  }
  .emp-sidebar .nav-link { padding: .4rem .8rem; font-size: .85rem; }
}

/* ==========================================================================
   APPLY WIZARD MODAL (job-single.php)
   ========================================================================== */
@media (max-width: 575.98px) {
  /* Modal: full-width on mobile */
  #applyWizardModal .modal-dialog,
  #shareJobModal .modal-dialog {
    margin: .5rem;
    max-width: calc(100vw - 1rem);
  }
  #applyWizardModal .modal-body { padding: 14px; }

  /* Wizard stepper: scroll horizontal */
  #wizardSteps {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    flex-wrap: nowrap;
    white-space: nowrap;
    padding-bottom: 4px;
  }
  #wizardSteps .nav-item { flex: 0 0 auto; }
  #wizardSteps .nav-link { font-size: .82rem; padding: .4rem .65rem; }

  /* File items: stack nicely */
  .aw-file-item { flex-wrap: wrap; gap: 8px; padding: 8px 10px; }
  .aw-file-item label { font-size: 12px; }
  .aw-preview-btn { font-size: 11px; padding: 3px 8px; }
}

/* ==========================================================================
   TABLES — Horizontal scroll wrapper
   ========================================================================== */
@media (max-width: 767.98px) {
  .table-responsive-auto {
    display: block;
    width: 100%;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
  }
  /* Employer/admin tables wrapped in .table-responsive by Bootstrap already,
     but ensure minimum column widths don't break layout */
  .table th, .table td {
    white-space: nowrap;
    font-size: .85rem;
    padding: .5rem .65rem;
  }
}

/* ==========================================================================
   SHOW-APPLICANTS / TABS — Scrollable tabs
   ========================================================================== */
@media (max-width: 767.98px) {
  .nav-tabs {
    flex-wrap: nowrap;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
  }
  .nav-tabs::-webkit-scrollbar { display: none; }
  .nav-tabs .nav-item { flex: 0 0 auto; }
  .nav-tabs .nav-link { white-space: nowrap; font-size: .85rem; padding: .5rem .75rem; }
}

/* ==========================================================================
   NOTIFICATIONS CENTER — Push footer down
   ========================================================================== */
@media (max-width: 575.98px) {
  .notif-page-card { border-radius: 10px; }
  .notif-page-card .card-header { padding: .75rem 1rem; }
  .notif-page-card .list-group-item { padding: .65rem .75rem; }
  .notif-item .n-title { font-size: .9rem; }
  .notif-item .small { font-size: .78rem; }
  .notif-date { font-size: .72rem; }
}

/* ==========================================================================
   AUTH: LOGIN / REGISTER
   ========================================================================== */
@media (max-width: 575.98px) {
  .login-card, .register-card {
    border-radius: 12px;
    padding: 20px 16px;
  }
  .login-card h3, .register-card h3 { font-size: 1.25rem; }
}

/* ==========================================================================
   GENERAL SPACING — tighter on mobile
   ========================================================================== */
@media (max-width: 575.98px) {
  .site-section { padding-top: 1.5rem; padding-bottom: 1.5rem; }
  .container { padding-left: 12px; padding-right: 12px; }
  h1 { font-size: 1.6rem; }
  h2 { font-size: 1.35rem; }
  h3 { font-size: 1.15rem; }
  h4 { font-size: 1.05rem; }
}

@media (max-width: 767.98px) and (min-width: 576px) {
  .site-section { padding-top: 2rem; padding-bottom: 2rem; }
}

/* ==========================================================================
   BUTTONS — Minimum tap target (scoped to main action buttons only)
   ========================================================================== */
@media (max-width: 767.98px) {
  .jd-actions .btn,
  .jd-cta .btn,
  .btn-block,
  .btn-lg,
  .btn-hero,
  form[method="POST"] > .btn,
  .fj-filter-toggle .btn { min-height: 44px; }
}

/* ==========================================================================
   ABOUT / CONTACT PAGES
   ========================================================================== */
@media (max-width: 575.98px) {
  .about-section { padding: 2rem 0; }
  .feature-card { padding: 20px; margin-bottom: 12px; }
}

/* ==========================================================================
   REGION JOBS SLIDER (index.php)
   ========================================================================== */
@media (max-width: 480px) {
  .rj-rail { grid-auto-columns: minmax(220px, 1fr); gap: 10px; }
  .rj-card { min-width: 220px; padding: 10px; }
  .rj-logo { width: 44px; height: 44px; border-radius: 10px; }
  .rj-title { font-size: .95rem; }
  .rj-chip { font-size: .72rem; padding: 4px 8px; }
}

/* ==========================================================================
   EMPLOYER DASHBOARD CARDS
   ========================================================================== */
@media (max-width: 575.98px) {
  .card { border-radius: 12px; }
  .card-body { padding: .85rem; }
  .card-header { padding: .6rem .85rem; }
}

/* ==========================================================================
   POSTEDJOBS / APPLICANT CARDS — Employer
   ========================================================================== */
@media (max-width: 575.98px) {
  .pj-card { border-radius: 12px; padding: 14px; }
  .pj-card .pj-title { font-size: 1rem; }
  .pj-actions { flex-wrap: wrap; gap: 6px; }
  .pj-actions .btn { flex: 1 1 auto; min-width: 0; font-size: .82rem; padding: .4rem .65rem; }
}

/* ==========================================================================
   SIMILAR JOBS — Already handled in jobsinglecss.css, but ensure safety
   ========================================================================== */
@media (max-width: 320px) {
  .sj-link { padding: 10px; gap: 8px; }
  .sj-title { font-size: .95rem; }
  .sj-meta { font-size: .82rem; }
}