[data-theme="dark"] 
/* Hide Google branding */



/* Hide translation banner */

body { top: 0 !important; }
/* Mobile */
@media (max-width: 480px) {
  
}
/* Float widget */

@media (max-width: 480px) {
  
}

/* GTranslate minimal fix */
.goog-te-gadget { font-size: 0 !important; }
.goog-te-gadget img { display: none !important; }
.goog-te-gadget .goog-te-combo {
  font-size: 13px !important;
  font-family: inherit !important;
  font-weight: 600 !important;
  padding: 6px 10px !important;
  border-radius: 8px !important;
  border: 1.5px solid var(--border, #E6E1D8) !important;
  background: var(--surface, #fff) !important;
  color: var(--text, #1a1410) !important;
  outline: none !important;
  box-shadow: none !important;
  cursor: pointer !important;
  max-width: 150px !important;
}
.goog-te-banner-frame { display: none !important; }
body { top: 0 !important; }
[data-theme="dark"] .goog-te-combo {
  background: var(--surface, #1a2030) !important;
  color: var(--text, #f0ede8) !important;
  border-color: rgba(255,255,255,.15) !important;
}

/* ── MODAL MOBILE FIX ────────────────────────────
   Center modal properly on all screen sizes
   Prevent it from appearing too low on mobile
─────────────────────────────────────────────── */
@media (max-width: 768px) {
  .modal-overlay {
    align-items: center !important;
    justify-content: center !important;
    padding: 1rem !important;
    overflow-y: auto !important;
  }
  .modal,
  .modal.modal-auth {
    max-width: 100% !important;
    width: calc(100% - 2rem) !important;
    border-radius: 16px !important;
    max-height: 88vh !important;
    overflow-y: auto !important;
    margin: auto !important;
    position: relative !important;
    transform: none !important;
  }
  .modal-overlay.open .modal {
    transform: none !important;
  }
  /* Prevent body scroll when modal open */
  body.modal-open {
    overflow: hidden !important;
    position: fixed !important;
    width: 100% !important;
  }
  /* Make modal body scrollable on small phones */
  .modal-body {
    max-height: 65vh;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
  }
  /* Profile Builder form inside modal */
  .modal-body .wppb-register-user,
  .modal-body .wppb-login-wrap {
    padding: 0 !important;
  }
  .modal-body .wppb-register-user input,
  .modal-body .wppb-login-wrap input {
    width: 100% !important;
    box-sizing: border-box !important;
    font-size: 16px !important; /* prevents iOS zoom */
  }
}
@media (max-width: 380px) {
  .modal, .modal.modal-auth {
    width: calc(100% - 1rem) !important;
    max-height: 85vh !important;
  }
  .modal-body { max-height: 60vh; }
  .modal-tabs { padding: .8rem 1rem 0 !important; }
  .modal-body { padding: 1rem !important; }
}

/* ── MOBILE SELECT DROPDOWN FIX ─────────────────────
   Prevents Android/iOS fullscreen picker popup
   Makes dropdowns open inline/below on all devices
─────────────────────────────────────────────────── */
select {
  -webkit-appearance: none !important;
  -moz-appearance: none !important;
  appearance: none !important;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1l5 5 5-5' stroke='%23E8500A' stroke-width='1.8' fill='none' stroke-linecap='round'/%3E%3C/svg%3E") !important;
  background-repeat: no-repeat !important;
  background-position: right 10px center !important;
  padding-right: 32px !important;
  cursor: pointer !important;
}
/* Prevent iOS zoom on focus */
@media (max-width: 768px) {
  select, input[type="text"], input[type="email"],
  input[type="tel"], input[type="password"], textarea {
    font-size: 16px !important;
  }
}
/* Style the AI Match selects specifically */
.ai-select, .fbs-sel, .hs-cat select {
  -webkit-appearance: none !important;
  appearance: none !important;
  background-color: var(--surface) !important;
  border: 1.5px solid var(--border) !important;
  border-radius: 9px !important;
  padding: 0.55rem 2rem 0.55rem 0.85rem !important;
  font-size: 0.85rem !important;
  font-weight: 600 !important;
  color: var(--text-2) !important;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1l5 5 5-5' stroke='%23E8500A' stroke-width='1.8' fill='none' stroke-linecap='round'/%3E%3C/svg%3E") !important;
  background-repeat: no-repeat !important;
  background-position: right 10px center !important;
  background-size: 12px !important;
}

/* ── PROFILE BUILDER FORM STYLING ───────────────────
   Makes Profile Builder login/register match JobDex theme
─────────────────────────────────────────────────── */
/* Profile Builder login form */
.wppb-login-wrap form,
.wppb-register-user form {
  padding: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
  border: none !important;
}
.wppb-login-wrap label,
.wppb-register-user label {
  display: block !important;
  font-size: 11px !important;
  font-weight: 700 !important;
  text-transform: uppercase !important;
  color: var(--text-2) !important;
  margin-bottom: 5px !important;
  letter-spacing: .4px !important;
  font-family: var(--font-body) !important;
}
.wppb-login-wrap input[type="text"],
.wppb-login-wrap input[type="password"],
.wppb-login-wrap input[type="email"],
.wppb-register-user input[type="text"],
.wppb-register-user input[type="password"],
.wppb-register-user input[type="email"],
.wppb-register-user input[type="tel"] {
  width: 100% !important;
  padding: 0.58rem 0.85rem !important;
  border: 1.5px solid var(--border) !important;
  border-radius: 9px !important;
  font-size: 0.875rem !important;
  background: var(--bg-2) !important;
  color: var(--text) !important;
  font-family: var(--font-body) !important;
  margin-bottom: 0.75rem !important;
  box-sizing: border-box !important;
  transition: border-color .2s !important;
  outline: none !important;
}
.wppb-login-wrap input:focus,
.wppb-register-user input:focus {
  border-color: var(--brand) !important;
}
.wppb-login-wrap input[type="submit"],
.wppb-register-user input[type="submit"],
.wppb-login-wrap button[type="submit"],
.wppb-register-user button[type="submit"] {
  width: 100% !important;
  background: var(--brand) !important;
  color: #fff !important;
  font-size: 0.95rem !important;
  font-weight: 800 !important;
  padding: 0.72rem !important;
  border-radius: 10px !important;
  border: none !important;
  cursor: pointer !important;
  font-family: var(--font-body) !important;
  margin-top: 0.5rem !important;
  box-shadow: 0 4px 14px rgba(232,80,10,.22) !important;
  transition: all .22s !important;
}
.wppb-login-wrap input[type="submit"]:hover,
.wppb-register-user input[type="submit"]:hover {
  background: #FF6B1A !important;
  transform: translateY(-1px) !important;
}
/* Remember me checkbox */
.wppb-login-wrap input[type="checkbox"] {
  width: auto !important;
  margin-right: 6px !important;
  accent-color: var(--brand) !important;
}
.wppb-login-wrap .wppb-remember-me {
  display: flex !important;
  align-items: center !important;
  gap: 5px !important;
  margin-bottom: 1rem !important;
}
/* Error/success messages */
.wppb-login-wrap .wppb-error,
.wppb-register-user .wppb-error {
  background: rgba(214,62,62,.08) !important;
  border: 1px solid rgba(214,62,62,.25) !important;
  color: var(--red, #D63E3E) !important;
  border-radius: 8px !important;
  padding: .65rem .9rem !important;
  font-size: .84rem !important;
  margin-bottom: .75rem !important;
}
/* Hide PB default styling elements */
.wppb-user-forms { max-width: 100% !important; }
.wppb-login-wrap .wppb-row,
.wppb-register-user .wppb-row { margin-bottom: 0 !important; }
/* Simple Membership styling */
.swpm-login-widget-form input[type="text"],
.swpm-login-widget-form input[type="password"] {
  width: 100% !important;
  padding: .58rem .85rem !important;
  border: 1.5px solid var(--border) !important;
  border-radius: 9px !important;
  font-size: .875rem !important;
  background: var(--bg-2) !important;
  color: var(--text) !important;
  margin-bottom: .75rem !important;
  box-sizing: border-box !important;
}
.swpm-login-widget-form input[type="submit"] {
  width: 100% !important;
  background: var(--brand) !important;
  color: #fff !important;
  font-size: .95rem !important;
  font-weight: 800 !important;
  padding: .72rem !important;
  border-radius: 10px !important;
  border: none !important;
  cursor: pointer !important;
}

/* ── STRONGER LOGIN FORM OVERRIDE ───────────────────
   Targets Profile Builder AND Simple Membership AND WP default login
─────────────────────────────────────────────────── */
#authOverlay .modal-body p { font-size: .8rem !important; color: var(--text-3) !important; margin: .4rem 0 !important; }
#authOverlay .modal-body label { display: block !important; font-size: .75rem !important; font-weight: 700 !important; text-transform: uppercase !important; color: var(--text-2) !important; margin-bottom: 4px !important; letter-spacing: .4px !important; }
#authOverlay .modal-body input[type="text"],
#authOverlay .modal-body input[type="password"],
#authOverlay .modal-body input[type="email"] {
  width: 100% !important; padding: .6rem .85rem !important;
  border: 1.5px solid var(--border) !important; border-radius: 9px !important;
  font-size: .9rem !important; background: var(--bg-2) !important;
  color: var(--text) !important; margin-bottom: .8rem !important;
  box-sizing: border-box !important; font-family: inherit !important;
  outline: none !important; transition: border-color .2s !important;
}
#authOverlay .modal-body input[type="text"]:focus,
#authOverlay .modal-body input[type="password"]:focus,
#authOverlay .modal-body input[type="email"]:focus { border-color: var(--brand) !important; }
#authOverlay .modal-body input[type="submit"],
#authOverlay .modal-body button[type="submit"],
#authOverlay .modal-body .button-primary {
  width: 100% !important; background: var(--brand) !important;
  color: #fff !important; font-size: .95rem !important; font-weight: 800 !important;
  padding: .72rem 1rem !important; border-radius: 10px !important;
  border: none !important; cursor: pointer !important; margin-top: .5rem !important;
  font-family: inherit !important; display: block !important;
  box-shadow: 0 4px 14px rgba(232,80,10,.22) !important;
  transition: all .22s !important; -webkit-appearance: none !important;
}
#authOverlay .modal-body input[type="submit"]:hover { background: #FF6B1A !important; }
#authOverlay .modal-body input[type="checkbox"] { width: auto !important; accent-color: var(--brand) !important; }
#authOverlay .modal-body table { width: 100% !important; border: none !important; }
#authOverlay .modal-body table td { padding: 0 !important; border: none !important; background: transparent !important; }
#authOverlay .modal-body .login-username,
#authOverlay .modal-body .login-password { margin-bottom: .7rem !important; }
#authOverlay .modal-body .wppb-form-field,
#authOverlay .modal-body .swpm-field { margin-bottom: .7rem !important; }
#authOverlay .modal-body h3,
#authOverlay .modal-body h4 { display: none !important; }

/* Hide register button on mobile - show only Login */
@media (max-width: 640px) {
  .hide-mobile { display: none !important; }
}

/* ── PERFORMANCE: Reduce layout shift (CLS) ── */
img, video, svg {
    max-width: 100%;
    height: auto;
}
img {
    display: block;
    loading: lazy; /* hint for browsers */
}
/* Prevent layout shift for images with known aspect ratios */
.job-thumb, .post-thumbnail, .card-img {
    aspect-ratio: 16/9;
    object-fit: cover;
}

/* ── PERFORMANCE: Smooth scrolling ── */
html {
    scroll-behavior: smooth;
}
@media (prefers-reduced-motion: reduce) {
    html { scroll-behavior: auto; }
    *, *::before, *::after { animation-duration: 0.01ms !important; transition-duration: 0.01ms !important; }
}

/* ── ACCESSIBILITY + SEO: Focus styles ── */
a:focus-visible,
button:focus-visible,
select:focus-visible,
textarea:focus-visible {
    outline: 2.5px solid var(--brand, #E8500A);
    outline-offset: 2px;
    border-radius: 4px;
}

/* ── SECURITY: Prevent user-select on sensitive UI ── */
.nav-right, .auth-modal { user-select: none; }
.job-content, .scheme-content, .post-content { user-select: text; }

/* ── PERFORMANCE: will-change only where needed ── */
.navbar { will-change: transform; }
.fu { will-change: opacity, transform; }
.fu.in { will-change: auto; } /* release after animation */

/* ── SEO: Ensure headings are visible above fold ── */
h1, h2, h3 { 
    text-rendering: optimizeLegibility;
    -webkit-font-smoothing: antialiased;
}

/* ── PERFORMANCE: Contain layout for card grids ── */
.job-grid, .scheme-grid, .results-grid {
    contain: layout style;
}

/* ── Ticker cursor fix ── */
.ticker-item { cursor: pointer; }
.ticker-item:hover { color: var(--brand); }


/* ═══════════════════════════════════════════════════
   FIX 1: Documents Required — 2-column card grid
   Only affects .doc-grid and .doc-card — nothing else
   ═══════════════════════════════════════════════════ */
.doc-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: .65rem;
  margin-top: .25rem;
}
.doc-card {
  display: flex;
  align-items: flex-start;
  gap: .55rem;
  background: var(--bg-2);
  border: 1.5px solid var(--border);
  border-radius: 10px;
  padding: .75rem .85rem;
  transition: border-color .2s;
  min-width: 0;
  word-break: break-word;
}
.doc-card:hover { border-color: var(--brand); }
.doc-icon { font-size: 1rem; flex-shrink: 0; line-height: 1.4; margin-top: .05rem; }
.doc-text { font-size: .82rem; font-weight: 600; color: var(--text-2); line-height: 1.45; word-break: break-word; min-width: 0; }
@media (max-width: 480px) {
  .doc-grid { grid-template-columns: 1fr; }
}

/* ═══════════════════════════════════════════════════
   FIX 2: Related Jobs — proper cards + horizontal swipe
   Uses flex row so cards are always card-shaped
   ═══════════════════════════════════════════════════ */
.rj-scroll-wrap {
  width: 100%;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
  -ms-overflow-style: none;
  padding-bottom: .5rem;
}
.rj-scroll-wrap::-webkit-scrollbar { display: none; }

/* Always flex row so swipe works on all screen sizes */
.rj-grid {
  display: flex !important;
  flex-direction: row !important;
  gap: 1rem !important;
  width: max-content !important;
}

.rj-card {
  display: flex;
  flex-direction: column;
  gap: .4rem;
  width: 270px;
  min-width: 270px;
  flex-shrink: 0;
  background: var(--surface);
  border: 1.5px solid var(--border);
  border-radius: 14px;
  padding: 1rem;
  text-decoration: none;
  color: inherit;
  transition: border-color .2s, box-shadow .2s, transform .2s;
  overflow: hidden;
}
.rj-card:hover {
  border-color: var(--brand);
  box-shadow: 0 6px 24px rgba(0,0,0,.09);
  transform: translateY(-2px);
}
.rj-card-top {
  display: flex;
  align-items: center;
  gap: .55rem;
  margin-bottom: .4rem;
  flex-wrap: wrap;
}
.rj-logo {
  width: 36px; height: 36px;
  border-radius: 9px;
  border: 1.5px solid var(--border);
  background: var(--bg-2);
  display: flex; align-items: center; justify-content: center;
  overflow: hidden; flex-shrink: 0;
}
.rj-badges { display: flex; gap: .3rem; flex-wrap: wrap; }
.rj-title {
  font-size: .9rem; font-weight: 800; color: var(--text);
  line-height: 1.3; margin-bottom: .25rem;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.rj-org {
  font-size: .76rem; color: var(--text-muted); font-weight: 600;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
  margin-bottom: .5rem;
}
.rj-footer {
  display: flex; justify-content: space-between; align-items: center;
  gap: .35rem; flex-wrap: wrap;
  border-top: 1px solid var(--border);
  padding-top: .55rem; margin-top: auto;
}
/* FIX: vacancy uses number_format — don't truncate */
.rj-vac { font-size: .74rem; font-weight: 700; color: var(--brand); white-space: nowrap; }
.rj-date { font-size: .70rem; color: var(--text-muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 140px; }

/* ═══════════════════════════════════════════════════
   FIX 3: Footer — proper column gap on mobile
   ═══════════════════════════════════════════════════ */
@media (max-width: 768px) {
  .footer-grid { grid-template-columns: 1fr 1fr !important; gap: 1.5rem !important; }
}
@media (max-width: 400px) {
  .footer-grid { grid-template-columns: 1fr !important; gap: 1.2rem !important; }
}
.footer-col h4, .footer-col .fc-title {
  margin-bottom: .75rem !important;
}
.footer-col a, .footer-col p {
  line-height: 1.8 !important;
}

/* ═══════════════════════════════════════════════════
   FIX 4: Hero search — keep inline on all screens
   Don't stack the button below on mobile
   ═══════════════════════════════════════════════════ */
.hero-search {
  display: flex !important;
  flex-direction: row !important;
  align-items: stretch !important;
  flex-wrap: nowrap !important;
}
.hs-wrap { flex: 1 !important; min-width: 0 !important; }
.hs-btn {
  flex-shrink: 0 !important;
  white-space: nowrap !important;
}
@media (max-width: 400px) {
  .hs-btn { padding: 0 1rem !important; font-size: .8rem !important; }
}

/* ═══════════════════════════════════════════════════
   FIX 5: Stats strip — 2x2 grid on mobile, not stacked
   ═══════════════════════════════════════════════════ */
@media (max-width: 600px) {
  .stats-inner {
    display: grid !important;
    grid-template-columns: 1fr 1fr !important;
    gap: 0 !important;
  }
  .stat-item {
    border-right: 1px solid var(--border) !important;
    border-bottom: 1px solid var(--border) !important;
    padding: 1rem .5rem !important;
  }
  .stat-item:nth-child(even) { border-right: none !important; }
  .stat-num { font-size: 1.4rem !important; }
}

/* ═══════════════════════════════════════════════════
   FIX: Suggestion box always on top — desktop + mobile
   ═══════════════════════════════════════════════════ */

/* Hero section must sit above stats strip */
.hero { z-index: 10 !important; overflow: visible !important; }
.hero-inner { z-index: 2 !important; overflow: visible !important; }
.hs-wrap { position: relative !important; z-index: 99 !important; overflow: visible !important; }

/* Suggestion box — always above everything */
#jdxSuggestBox {
  position: absolute !important;
  z-index: 99999 !important;
  left: 0 !important;
  right: 0 !important;
  top: calc(100% + 6px) !important;
}

/* Stats strip must sit below hero */
.stats-strip { position: relative; z-index: 1; }

/* Mobile nav chips row must sit below suggest box */
.hero-mobile-nav { position: relative; z-index: 5 !important; }
.hero-chips      { position: relative; z-index: 5 !important; }

/* ═══════════════════════════════════════════════════
   FIX: Nav links — prevent touching on medium screens
   ═══════════════════════════════════════════════════ */
@media (max-width: 1100px) and (min-width: 897px) {
  .nav-links { gap: 0 !important; }
  .nav-links a { padding: 0.35rem 0.45rem !important; font-size: 0.76rem !important; }
  .nav-right { gap: 0.3rem !important; }
  .btn-reg, .btn-post { padding: 0.38rem 0.7rem !important; font-size: 0.78rem !important; }
}
@media (max-width: 1200px) and (min-width: 1101px) {
  .nav-links a { padding: 0.38rem 0.5rem !important; font-size: 0.79rem !important; }
}