/* =========================================================
   CelluTech Technologies — Careers Portal
   Brand theme
   ========================================================= */

:root {
  --ct-navy: #0b1b33;
  --ct-navy-light: #16294a;
  --ct-navy-soft: #1f3358;
  --ct-orange: #f4791e;
  --ct-orange-dark: #fd6b02;
  --ct-orange-light: #ff9142;
  --ct-gray: #6b7280;
  --ct-gray-light: #9aa3b2;
  --ct-bg: #f6f7fb;
  --ct-card-radius: 16px;
  --ct-shadow-sm: 0 2px 10px rgba(11, 27, 51, 0.06);
  --ct-shadow-md: 0 10px 30px rgba(11, 27, 51, 0.12);
  --ct-shadow-lg: 0 20px 50px rgba(11, 27, 51, 0.18);
  --ct-transition: all 0.25s cubic-bezier(0.4, 0, 0.2, 1);
}

* { box-sizing: border-box; }

body {
  font-family: 'Segoe UI', -apple-system, BlinkMacSystemFont, Roboto, Helvetica, Arial, sans-serif;
  color: #1c2434;
  background: var(--ct-bg);
  -webkit-font-smoothing: antialiased;
}

a { text-decoration: none; }

/* ---------------- Navbar ---------------- */
.ct-navbar {
  background: #fff;
  border-bottom: 1px solid #eef0f5;
  transition: var(--ct-transition);
  padding-top: 12px;
  padding-bottom: 12px;
}
.ct-navbar.scrolled {
  box-shadow: var(--ct-shadow-sm);
  padding-top: 8px;
  padding-bottom: 8px;
}
.ct-navbar-logo { height: 40px; transition: var(--ct-transition); }
.ct-navbar.scrolled .ct-navbar-logo { height: 34px; }
.ct-navbar .nav-link {
  color: var(--ct-navy);
  font-weight: 500;
  padding: 0.5rem 0.9rem !important;
  border-radius: 8px;
  transition: var(--ct-transition);
}
.ct-navbar .nav-link:hover { color: var(--ct-orange-dark); }
.navbar-toggler { border-color: #dde1ea; }
.navbar-toggler-icon {
  background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 30 30'%3e%3cpath stroke='rgba(11,27,51,0.85)' stroke-width='2' stroke-linecap='round' stroke-miterlimit='10' d='M4 7h22M4 15h22M4 23h22'/%3e%3c/svg%3e");
}

/* ---------------- Page header (minimal) ---------------- */
.ct-page-header {
  background: var(--ct-bg);
  padding: 118px 0 32px;
}
.ct-page-header h1 {
  color: var(--ct-navy);
  font-weight: 800;
  font-size: clamp(1.7rem, 3.4vw, 2.5rem);
  line-height: 1.2;
  margin-bottom: 10px;
}
.ct-page-header h1 span { color: var(--ct-orange); }
.ct-page-header p.lead {
  color: var(--ct-gray);
  font-size: 1.05rem;
  max-width: 620px;
  margin-bottom: 0;
}

@keyframes ct-fade-up {
  from { opacity: 0; transform: translateY(22px); }
  to { opacity: 1; transform: translateY(0); }
}

/* ---------------- Search / Filter bar ---------------- */
.ct-search-card {
  background: #fff;
  border-radius: var(--ct-card-radius);
  box-shadow: var(--ct-shadow-md);
  border: 1px solid #eef0f5;
  padding: 20px;
  position: relative;
  z-index: 5;
}
.ct-search-card .form-control,
.ct-search-card .form-select {
  border-radius: 10px;
  border: 1px solid #e6e9f0;
  padding: 0.65rem 0.9rem;
}
.ct-search-card .form-control:focus,
.ct-search-card .form-select:focus {
  border-color: var(--ct-orange);
  box-shadow: 0 0 0 0.2rem rgba(244, 121, 30, 0.15);
}
.ct-search-input-wrap { position: relative; }
.ct-search-input-wrap svg {
  position: absolute; left: 14px; top: 50%; transform: translateY(-50%);
  color: var(--ct-gray-light);
  pointer-events: none;
}
.ct-search-card .ct-search-input-wrap input.form-control { padding-left: 42px; }

/* ---------------- Section headings ---------------- */
.ct-section { padding: 44px 0 80px; }
.ct-section-title {
  font-weight: 800;
  color: var(--ct-navy);
  font-size: clamp(1.7rem, 3vw, 2.3rem);
}
.ct-section-sub { color: var(--ct-gray); max-width: 560px; }
.ct-eyebrow {
  color: var(--ct-orange);
  font-weight: 700;
  font-size: 0.82rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

/* ---------------- Job cards ---------------- */
#jobsGrid { min-height: 200px; }
.ct-job-card {
  background: #fff;
  border-radius: var(--ct-card-radius);
  border: 1px solid #eef0f5;
  padding: 26px;
  height: 100%;
  transition: var(--ct-transition);
  cursor: pointer;
  animation: ct-fade-up 0.5s ease both;
}
.ct-job-card:hover {
  transform: translateY(-6px);
  box-shadow: var(--ct-shadow-md);
  border-color: transparent;
}
.ct-job-card-top { display: flex; justify-content: space-between; align-items: flex-start; gap: 10px; }
.ct-dept-badge {
  display: inline-block;
  background: rgba(11, 27, 51, 0.06);
  color: var(--ct-navy);
  font-weight: 600;
  font-size: 0.76rem;
  padding: 5px 12px;
  border-radius: 999px;
  margin-bottom: 14px;
}
.ct-type-badge {
  display: inline-block;
  background: rgba(244, 121, 30, 0.1);
  color: var(--ct-orange-dark);
  font-weight: 700;
  font-size: 0.72rem;
  text-transform: uppercase;
  letter-spacing: 0.03em;
  padding: 4px 10px;
  border-radius: 6px;
  white-space: nowrap;
}
.ct-job-title {
  font-weight: 700;
  font-size: 1.15rem;
  color: var(--ct-navy);
  margin: 4px 0 10px;
}
.ct-job-card:hover .ct-job-title { color: var(--ct-orange-dark); }
.ct-job-meta {
  color: var(--ct-gray);
  font-size: 0.88rem;
  display: flex;
  align-items: center;
  gap: 6px;
  margin-bottom: 6px;
}
.ct-job-meta svg { flex-shrink: 0; color: var(--ct-gray-light); }
.ct-job-footer {
  margin-top: 18px;
  padding-top: 16px;
  border-top: 1px dashed #eaedf3;
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.ct-job-salary { font-weight: 700; color: var(--ct-navy); font-size: 0.92rem; }
.ct-job-posted { color: var(--ct-gray-light); font-size: 0.78rem; }

.ct-empty-state {
  text-align: center;
  padding: 60px 20px;
  color: var(--ct-gray);
}

/* ---------------- Buttons ---------------- */
.ct-btn-orange {
  background: linear-gradient(135deg, var(--ct-orange), var(--ct-orange-dark));
  color: #fff !important;
  border: none;
  font-weight: 600;
  padding: 0.6rem 1.4rem;
  border-radius: 10px;
  transition: var(--ct-transition);
  box-shadow: 0 6px 16px rgba(244, 121, 30, 0.28);
}
.ct-btn-orange:hover {
  transform: translateY(-2px);
  box-shadow: 0 10px 24px rgba(244, 121, 30, 0.38);
  color: #fff;
}
.ct-btn-navy {
  background: var(--ct-navy);
  color: #fff !important;
  border: none;
  font-weight: 600;
  padding: 0.6rem 1.4rem;
  border-radius: 10px;
  transition: var(--ct-transition);
}
.ct-btn-navy:hover { background: var(--ct-navy-light); transform: translateY(-2px); color: #fff; }
.ct-btn-outline {
  border: 1.5px solid #dde1ea;
  color: var(--ct-navy);
  font-weight: 600;
  border-radius: 10px;
  transition: var(--ct-transition);
  background: #fff;
}
.ct-btn-outline:hover { border-color: var(--ct-orange); color: var(--ct-orange-dark); }
.ct-btn-outline.active {
  background: var(--ct-navy);
  border-color: var(--ct-navy);
  color: #fff;
}

/* ---------------- Footer ---------------- */
.ct-footer { background: #fff; border-top: 1px solid #eef0f5; }
.ct-footer-logo { height: 34px; display: block; }
.ct-footer-text { color: var(--ct-gray); }
.ct-footer-heading { color: var(--ct-navy); font-weight: 700; font-size: 0.92rem; margin-bottom: 14px; }
.ct-footer-links li { margin-bottom: 8px; }
.ct-footer-links a { color: var(--ct-gray); font-size: 0.92rem; transition: var(--ct-transition); }
.ct-footer-links a:hover { color: var(--ct-orange-dark); }
.ct-footer-divider { border-color: #eef0f5; margin: 30px 0 20px; }

/* ---------------- Apply Modal ---------------- */
#applyModal .modal-content, #jobModal .modal-content {
  border: none;
  border-radius: 18px;
  overflow: hidden;
}
#applyModal .modal-header, #jobModal .modal-header {
  background: var(--ct-navy);
  color: #fff;
  border: none;
  padding: 22px 26px;
}
#applyModal .btn-close, #jobModal .btn-close { filter: brightness(0) invert(1); }
.ct-dropzone {
  border: 2px dashed #dde1ea;
  border-radius: 14px;
  padding: 28px 16px;
  text-align: center;
  cursor: pointer;
  transition: var(--ct-transition);
  background: #fafbfd;
}
.ct-dropzone:hover, .ct-dropzone.dragover {
  border-color: var(--ct-orange);
  background: rgba(244, 121, 30, 0.05);
}
.ct-dropzone svg { color: var(--ct-orange); margin-bottom: 8px; }
.ct-dropzone .file-name { font-weight: 600; color: var(--ct-navy); }
.ct-form-floating-label { font-size: 0.85rem; font-weight: 600; color: var(--ct-navy); margin-bottom: 6px; }

.ct-apply-success {
  text-align: center;
  padding: 30px 10px;
}
.ct-apply-success .check-circle {
  width: 80px; height: 80px;
  border-radius: 50%;
  background: rgba(34, 197, 94, 0.12);
  color: #16a34a;
  display: flex; align-items: center; justify-content: center;
  margin: 0 auto 20px;
  animation: ct-pop 0.4s ease both;
}
@keyframes ct-pop {
  0% { transform: scale(0.6); opacity: 0; }
  100% { transform: scale(1); opacity: 1; }
}

/* ---------------- Spinner ---------------- */
.ct-spinner {
  width: 1rem; height: 1rem;
  border: 2px solid rgba(255,255,255,0.5);
  border-top-color: #fff;
  border-radius: 50%;
  display: inline-block;
  animation: ct-spin 0.6s linear infinite;
}
@keyframes ct-spin { to { transform: rotate(360deg); } }

/* ---------------- Misc ---------------- */
.ct-fade-in { animation: ct-fade-up 0.5s ease both; }
::selection { background: var(--ct-orange); color: #fff; }

@media (max-width: 991px) {
  .ct-page-header { padding: 108px 0 28px; }
}