/* Kelma Careers — brand styles
 * Tailwind via CDN handles 95% of layout. This file holds the brand-specific
 * utility classes and a couple of micro-details that benefit from being
 * in a real stylesheet (CSS vars, pseudo-elements, focus rings).
 */

:root {
  --kelma: #70215c;
  --kelma-700: #5d1b4d;
  --kelma-50: #faf3fb;
  --kelma-100: #f3e2f2;
  --kelma-200: #e3bee1;
  --accent: #f5d76e;
  --ok: #22c55e;
  --slate-50: #f8fafc;
  --slate-200: #e2e8f0;
  --slate-300: #cbd5e1;
  --slate-500: #64748b;
  --slate-600: #475569;
  --slate-800: #1e293b;
  --slate-900: #0f172a;
}

html { scroll-behavior: smooth; }

body { font-feature-settings: "ss01", "cv11"; }

/* Buttons */
.btn-primary {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.7rem 1.25rem;
  border-radius: 0.75rem;
  background: var(--kelma);
  color: #fff;
  font-weight: 600;
  font-size: 0.9375rem;
  box-shadow: 0 8px 24px -10px rgba(112, 33, 92, 0.5);
  transition: background 0.15s ease, transform 0.15s ease, box-shadow 0.15s ease;
  text-decoration: none;
}
.btn-primary:hover { background: var(--kelma-700); transform: translateY(-1px); box-shadow: 0 12px 28px -10px rgba(112, 33, 92, 0.55); }
.btn-primary:active { transform: translateY(0); }
.btn-primary:focus-visible { outline: 2px solid var(--kelma-200); outline-offset: 2px; }

/* "Apply" affordance on each row. Plain text by default, becomes a filled
   purple chip on hover so the user can tell it's clickable. */
.apply-cta {
  display: inline-flex;
  align-items: center;
  padding: 0.45rem 0.95rem;
  border-radius: 999px;
  background: transparent;
  color: var(--kelma);
  font-weight: 600;
  font-size: 0.875rem;
  border: 1px solid var(--kelma-200);
  transition: background 0.15s ease, color 0.15s ease, border-color 0.15s ease;
}
.group:hover .apply-cta,
a:hover .apply-cta {
  background: var(--kelma);
  color: #fff;
  border-color: var(--kelma);
}

/* Tags on job detail */
.tag {
  display: inline-flex;
  align-items: center;
  padding: 0.25rem 0.6rem;
  border-radius: 0.5rem;
  font-size: 0.7rem;
  font-weight: 600;
  letter-spacing: 0.02em;
}
.tag-kelma {
  background: var(--kelma-50);
  color: var(--kelma-700);
  border: 1px solid var(--kelma-100);
}
.tag-neutral {
  background: #f1f5f9;
  color: var(--slate-600);
  border: 1px solid var(--slate-200);
}

/* Form fields */
.field { display: flex; flex-direction: column; gap: 0.4rem; }
.field-label {
  font-size: 0.875rem;
  font-weight: 600;
  color: var(--slate-800);
}
.field-label .req { color: var(--kelma); margin-left: 0.15rem; }
.field-label .opt { color: var(--slate-500); font-weight: 400; margin-left: 0.25rem; }

.field-input {
  display: block;
  width: 100%;
  padding: 0.6rem 0.85rem;
  border-radius: 0.6rem;
  border: 1px solid var(--slate-200);
  background: #fff;
  color: var(--slate-900);
  font-size: 0.9375rem;
  transition: border-color 0.15s ease, box-shadow 0.15s ease;
}
.field-input::placeholder { color: var(--slate-300); }
.field-input:focus {
  outline: none;
  border-color: var(--kelma);
  box-shadow: 0 0 0 3px rgba(112, 33, 92, 0.12);
}
textarea.field-input { resize: vertical; min-height: 6.5rem; }

/* Prose tweaks (job description body) */
.prose { color: var(--slate-800); }
.prose p { margin: 0.85rem 0; }
.prose ol { list-style: decimal; padding-left: 1.4rem; }
.prose ol li { padding-left: 0.3rem; }
.prose ol li::marker { color: var(--kelma); font-weight: 700; }

/* Line clamp helper for job summaries on the listing */
.line-clamp-2 {
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

/* Mobile tweaks */
@media (max-width: 640px) {
  /* kept for future hero additions */
}