/*
  jobs-public.css: the public job pages, the application form and the "Open positions" section.
  Loaded by the public layout on every page (the section can sit on any page). Tokens only
  (var(--bfau-*), no colour literals: StyleRules), logical properties only, so Arabic needs nothing
  extra. The cards and the section title are Huruma demo 3's own markup (solve-item, section-title);
  these rules only give them a job's content and make the template's fixed colours follow the theme.
*/

/* ---- A job card (Huruma's solve-item, made a link) ---- */
.solve-item.bfau-job-card {
  display: block;
  block-size: calc(100% - 30px);
  color: var(--bfau-text);
  text-decoration: none;
  background-color: color-mix(in srgb, var(--bfau-primary) 8%, var(--bfau-surface));
}

.solve-item.bfau-job-card:hover,
.solve-item.bfau-job-card:focus-visible {
  background-color: var(--bfau-surface);
  color: var(--bfau-text);
}

.bfau-job-card-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  inline-size: 4rem;
  block-size: 4rem;
  border-radius: 50%;
  background-color: var(--bfau-primary);
  color: var(--bfau-on-primary);
  font-size: 1.75rem;
}

.bfau-job-card-icon i::before {
  margin: 0;
  font-size: 1.75rem;
}

.bfau-job-card h3 {
  overflow-wrap: anywhere;
}

.bfau-job-card-meta {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 0.25rem 0.9rem;
  color: var(--bfau-text-muted);
}

.bfau-job-card-meta .bx {
  color: var(--bfau-primary-text);
}

.solve-item .bfau-job-card-date {
  margin-block-start: 0.6rem;
  font-weight: 600;
  color: var(--bfau-primary-text);
}

.bfau-job-card-closed {
  opacity: 0.8;
}

.bfau-job-card-closed .bfau-job-card-icon {
  background-color: var(--bfau-text-muted);
}

/* ---- The "Closed" badge ---- */
.bfau-job-badge {
  display: inline-block;
  padding: 0.2rem 0.7rem;
  border-radius: 999px;
  font-size: 0.8rem;
  font-weight: 600;
}

.bfau-job-badge-closed {
  background-color: var(--bfau-dark-section);
  color: var(--bfau-on-photo);
}

.bfau-job-card .bfau-job-badge {
  position: absolute;
  inset-block-start: 0.75rem;
  inset-inline-end: 0.75rem;
}

.bfau-job-title-badge {
  margin-block-start: 0.75rem;
}

/* ---- The job list ---- */
.bfau-jobs-tabs {
  display: flex;
  gap: 0.5rem;
  border-block-end: 1px solid var(--bfau-border);
  padding-block-end: 0.5rem;
}

.bfau-jobs-tab {
  padding: 0.5rem 1rem;
  border-radius: var(--bfau-radius);
  color: var(--bfau-text);
  text-decoration: none;
}

.bfau-jobs-tab.active {
  background-color: var(--bfau-primary);
  color: var(--bfau-on-primary);
}

.bfau-jobs-pager {
  display: flex;
  flex-wrap: wrap;
  gap: 0.35rem;
}

.bfau-jobs-pager a {
  padding: 0.35rem 0.75rem;
  border: 1px solid var(--bfau-border);
  border-radius: var(--bfau-radius);
  color: inherit;
  text-decoration: none;
}

.bfau-jobs-pager a.active {
  background-color: var(--bfau-primary);
  border-color: var(--bfau-primary);
  color: var(--bfau-on-primary);
}

.bfau-jobs-empty {
  padding-block: 2.5rem;
  text-align: center;
  color: var(--bfau-text-muted);
}

.bfau-jobs-empty .bx {
  font-size: 2.5rem;
  color: var(--bfau-primary-text);
}

/* ---- The section ---- */
.bfau-jobs-section-title p {
  margin-block-start: 0.5rem;
}

.bfau-jobs-more {
  text-align: center;
}

.bfau-jobs-more .optional-btn {
  padding: 12px 28px;
}

/* Arrows point the reading direction's way. */
[dir="rtl"] .bfau-jobs-arrow {
  display: inline-block;
  transform: scaleX(-1);
}

/* ---- A job's page ---- */
.bfau-job-body {
  line-height: 1.8;
  overflow-wrap: anywhere;
}

.bfau-job-body h2,
.bfau-job-body h3 {
  margin-block: 1.5rem 0.75rem;
}

.bfau-job-closed-note {
  display: flex;
  gap: 0.75rem;
  align-items: flex-start;
  margin-block-end: 1.5rem;
  padding: 1rem 1.25rem;
  border-radius: var(--bfau-radius);
  background-color: color-mix(in srgb, var(--bfau-text-muted) 12%, var(--bfau-surface));
  color: var(--bfau-heading);
}

.bfau-job-closed-note .bx {
  font-size: 1.5rem;
}

.bfau-job-closed-note p {
  margin: 0;
}

.bfau-job-attachments {
  margin-block: 2rem;
}

.bfau-job-attachments h2 {
  font-size: 1.25rem;
  margin-block-end: 0.75rem;
}

.bfau-job-attachments ul {
  list-style: none;
  padding: 0;
  margin: 0;
}

.bfau-job-attachments li + li {
  margin-block-start: 0.5rem;
}

.bfau-job-attachments a {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  overflow-wrap: anywhere;
}

.bfau-job-file-size {
  color: var(--bfau-text-muted);
  font-size: 0.85rem;
}

.bfau-job-facts {
  padding: 1.5rem;
  border: 1px dashed var(--bfau-primary);
  border-radius: var(--bfau-radius);
  background-color: var(--bfau-surface);
}

.bfau-job-fact {
  display: flex;
  gap: 0.75rem;
  align-items: flex-start;
  margin-block-end: 1rem;
}

.bfau-job-fact .bx {
  font-size: 1.4rem;
  color: var(--bfau-primary-text);
}

.bfau-job-fact-label {
  font-size: 0.85rem;
  color: var(--bfau-text-muted);
}

.bfau-job-fact-value {
  font-weight: 600;
  color: var(--bfau-heading);
  overflow-wrap: anywhere;
}

.bfau-job-apply {
  margin-block-start: 1.5rem;
}

.bfau-job-apply .bfau-job-apply-btn {
  inline-size: 100%;
}

.bfau-job-apply-hint {
  margin-block: 0.75rem 0;
  font-size: 0.9rem;
  color: var(--bfau-text-muted);
  overflow-wrap: anywhere;
}

/* ---- The application form (Huruma's contact form) ---- */
.bfau-job-apply-form {
  margin-block-start: 2.5rem;
}

.contact-area .contact-form form .form-control.bfau-job-cv {
  block-size: auto;
  padding-block: 0.9rem;
}

/* Only robots fill this: off the screen and out of the tab order, but not display:none (some
   robots skip hidden fields). */
.bfau-jobs-trap {
  position: absolute;
  inset-inline-start: -10000px;
  inline-size: 1px;
  block-size: 1px;
  overflow: hidden;
}

/* ---- The confirmation ---- */
.bfau-job-sent {
  max-inline-size: 42rem;
  margin-inline: auto;
  text-align: center;
}

.bfau-job-sent .bx {
  font-size: 4rem;
  color: var(--bfau-primary-text);
}

.bfau-job-sent h2 {
  margin-block: 1rem;
}

.bfau-job-sent-reference {
  font-size: 1.25rem;
  font-weight: 700;
  color: var(--bfau-heading);
}