/**
 * Recruitment page layout — Golden Eagle GS.
 *
 * Scoped to the Recruitment page and built from existing design tokens and
 * component classes. No image is used because the available office image
 * contains a disputed logo treatment.
 */

.ge-recruitment__hero {
  padding-block: var(--ge-space-7);
}

.ge-recruitment__hero-content {
  display: flex;
  flex-direction: column;
  gap: var(--ge-space-3);
  max-width: 46rem;
}

.ge-recruitment__section {
  padding-block: var(--ge-space-7);
}

.ge-recruitment__section--audiences {
  background: var(--ge-color-navy-900);
  border-block: 1px solid var(--ge-color-border-subtle);
}

.ge-recruitment__service-card {
  min-height: 0;
}

.ge-recruitment__service-number {
  color: var(--ge-color-gold-300);
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 0.12em;
}

.ge-recruitment__audience-card {
  display: flex;
  flex-direction: column;
  gap: var(--ge-space-3);
}

.ge-recruitment__audience-card p {
  color: var(--ge-color-text-secondary);
  line-height: 1.6;
  margin: 0;
}

.ge-recruitment__cta-actions {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--ge-space-3);
}

@media (min-width: 480px) {
  .ge-recruitment__cta-actions {
    flex-direction: row;
    justify-content: center;
  }
}

@media (min-width: 768px) {
  .ge-recruitment__hero,
  .ge-recruitment__section {
    padding-block: var(--ge-space-8);
  }
}

/* ==========================================================================
   V17 — EMPLOYER JOURNEY SECTIONS (2026-10-04)
   Process timeline, Why band, and audience links for the restructured
   Recruitment page. Built entirely from existing design tokens and the
   existing .ge-card / .ge-section-header components — no new design
   system, no new colour, no !important.
   ========================================================================== */

/* Section rhythm. The six sections group into two readable blocks
   rather than strictly alternating: What We Do + Who We Support sit on
   the page surface (what we offer, and to whom), then Process + Why sit
   together on navy-900 (how we work, and why trust it), before the CTA
   returns to the surface. Measured result: surface, surface, surface,
   navy, navy, surface. */
.ge-recruitment__section--process,
.ge-recruitment__section--why {
  background: var(--ge-color-navy-900);
  border-block: 1px solid var(--ge-color-border-subtle);
}

/* V18 CORRECTION. V17 set this band to `background: none` to alternate
   against what I believed was a dark page surface. The page surface was
   white, so "What We Do" and "For Employers and Job Seekers" rendered
   white-on-white — two of the fifteen invisible headings measured across
   the site. The alternation is now dark-on-dark, handled by the base and
   band rules below. */
.ge-recruitment__section--audiences {
  background-color: var(--ge-color-navy-850);
  border-block: 0;
}

/* --- Process ------------------------------------------------------- */
.ge-recruitment__process {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: var(--ge-space-5);
}

.ge-recruitment__process-step {
  display: flex;
  align-items: flex-start;
  gap: var(--ge-space-4);
}

.ge-recruitment__process-number {
  flex: 0 0 auto;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  border: 1px solid var(--ge-color-border-subtle);
  border-radius: var(--ge-radius-md);
  color: var(--ge-color-gold-300);
  font-size: 16px;
  font-weight: 700;
  line-height: 1;
}

.ge-recruitment__process-body {
  display: flex;
  flex-direction: column;
  gap: var(--ge-space-1);
}

.ge-recruitment__process-title {
  color: var(--ge-color-text-primary);
  font-size: 18px;
  margin: 0;
}

.ge-recruitment__process-description {
  color: var(--ge-color-text-secondary);
  line-height: 1.6;
  margin: 0;
  max-width: 44ch;
}

/* --- Why band ------------------------------------------------------ */
.ge-recruitment__why-card {
  display: flex;
  flex-direction: column;
  gap: var(--ge-space-2);
}

.ge-recruitment__why-card p {
  color: var(--ge-color-text-secondary);
  line-height: 1.6;
  margin: 0;
}

/* --- Audience card link -------------------------------------------- */
/* Gives each audience card its own next action, which is what separates
   the employer journey from the candidate journey on this page. */
.ge-recruitment__audience-link {
  align-self: flex-start;
  margin-top: auto;
  /* 44px minimum target (WCAG 2.2 AA 2.5.8). These are standalone card
     CTAs, not inline links inside a sentence, so the inline-link exception
     does not apply to them. */
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  color: var(--ge-color-gold-300);
  font-weight: 600;
  text-decoration: none;
}

.ge-recruitment__audience-link:hover,
.ge-recruitment__audience-link:focus-visible {
  text-decoration: underline;
}

@media (min-width: 768px) {
  .ge-recruitment__process {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: var(--ge-space-6);
  }
}

@media (min-width: 1024px) {
  .ge-recruitment__process {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}

/* ==========================================================================
   V18 — PAGE SURFACE FIX (2026-10-04)
   Base surface for every Recruitment section. See the V18 note above the
   audiences rule for the measured defect this corrects. */
.ge-recruitment__section {
  background-color: var(--ge-color-navy-900);
}

.ge-recruitment__section--process,
.ge-recruitment__section--why {
  background-color: var(--ge-color-navy-850);
}

/* ==========================================================================
   V19 — EMPLOYER CONTENT (2026-10-04)
   Typography and spacing for the written sections added to the Recruitment
   page. Existing tokens only; no new colours, no new components, no
   !important.
   ========================================================================== */

/* Running prose. Capped to a comfortable measure so the explanatory
   sections stay readable instead of spanning the full container. */
.ge-recruitment__prose {
  display: flex;
  flex-direction: column;
  gap: var(--ge-space-3);
  max-width: 68ch;
}

.ge-recruitment__prose p {
  color: var(--ge-color-text-secondary);
  line-height: 1.7;
  margin: 0;
}

/* "What stays with you" line inside each process stage. Set apart from the
   stage description by a gold rule so an employer can scan their own
   obligations down the list without reading every stage in full. */
.ge-recruitment__process-your-part {
  margin: var(--ge-space-2) 0 0;
  /* v20.16: logical properties — same as before in English, mirrored in Arabic (RTL). */
  padding-inline-start: var(--ge-space-3);
  border-inline-start: 2px solid var(--ge-color-border-subtle);
  color: var(--ge-color-text-secondary);
  font-size: 14px;
  line-height: 1.6;
}

.ge-recruitment__process-more {
  margin: var(--ge-space-5) 0 0;
}

/* Contextual related-links line. Inline list, comfortably spaced, with the
   44px target height the rest of this release uses. */
.ge-recruitment__related {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--ge-space-3);
  margin: var(--ge-space-6) 0 0;
  color: var(--ge-color-text-secondary);
  font-size: 14px;
}

.ge-recruitment__related a {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  color: var(--ge-color-gold-300);
  font-weight: 600;
  text-decoration: none;
}

.ge-recruitment__related a:hover,
.ge-recruitment__related a:focus-visible {
  text-decoration: underline;
}

/* "What Happens Next" shares the band treatment with the process and why
   sections so the three explanatory blocks read as one sequence. */
.ge-recruitment__section--after {
  background-color: var(--ge-color-navy-850);
}

/* Section intro paragraph. .ge-section-header__description is styled in
   home-part4.css, which is enqueued only on the Homepage and archives and
   is NOT loaded here — verified. Scoped to .ge-recruitment so this page
   gets the treatment without altering that global class anywhere else. */
.ge-recruitment .ge-section-header__description {
  font-size: 16px;
  color: var(--ge-color-text-secondary);
  max-width: 68ch;
  margin: 0;
}


/* ==========================================================================
   V19 — PROCESS PAGE STAGES (2026-10-04)
   Layout for the standalone Recruitment Process page. Reuses the existing
   .ge-recruitment wrapper, cards and tokens, so the two employer pages
   share one visual language and one stylesheet.
   ========================================================================== */

.ge-stage {
  display: flex;
  flex-direction: column;
  gap: var(--ge-space-4);
}

.ge-stage__head {
  display: flex;
  align-items: flex-start;
  gap: var(--ge-space-4);
}

.ge-stage__number {
  flex: 0 0 auto;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 48px;
  height: 48px;
  border: 1px solid var(--ge-color-border-subtle);
  border-radius: var(--ge-radius-md);
  color: var(--ge-color-gold-300);
  font-size: 18px;
  font-weight: 700;
  line-height: 1;
}

.ge-stage__title {
  color: var(--ge-color-text-primary);
  margin: 0;
}

.ge-stage__summary {
  color: var(--ge-color-text-secondary);
  line-height: 1.6;
  margin: var(--ge-space-1) 0 0;
  max-width: 60ch;
}

.ge-stage__roles {
  margin-top: var(--ge-space-2);
}

/* The authority line. Visually distinct because it is the legally
   important sentence on the page: it states what is NOT ours to decide. */
.ge-stage__authority {
  margin: 0;
  padding: var(--ge-space-4);
  background-color: var(--ge-color-navy-950);
  border: 1px solid var(--ge-color-border-subtle);
  border-radius: var(--ge-radius-md);
  color: var(--ge-color-text-secondary);
  font-size: 14px;
  line-height: 1.6;
}

.ge-stage__authority strong {
  color: var(--ge-color-gold-300);
}

/* ==========================================================================
   V19 — EMPLOYER FAQ (2026-10-04)
   Definition list, because that is what a Q&A actually is semantically.
   ========================================================================== */

.ge-faq {
  margin: 0;
  max-width: 76ch;
}

.ge-faq__item + .ge-faq__item {
  margin-top: var(--ge-space-5);
  padding-top: var(--ge-space-5);
  border-top: 1px solid var(--ge-color-border-subtle);
}

.ge-faq__question {
  color: var(--ge-color-text-primary);
  font-size: 18px;
  font-weight: 700;
  line-height: 1.4;
  margin: 0;
}

.ge-faq__answer {
  color: var(--ge-color-text-secondary);
  line-height: 1.7;
  margin: var(--ge-space-2) 0 0;
}