/* ==========================================================================
   JAT SITEWIDE CSS — 05-components-v2.css
   v2 components: eyebrow inverse, marquee, check list, process steps, angled media, benefits glass grid, watermark, hero glow, trust strip in-hero, principle list, contact list, hide-empty career fields

   Loaded right after Elementor's Site Settings CSS (see child functions.php),
   in file-name order 01 → 07. Keep blocks in order; add new blocks at the end
   of the relevant file under a "JAT — …" banner comment.
   ========================================================================== */

/* =========================================================
   JAT — EYEBROW LINE LEFT — INVERSE
   White text, keeps the red accent line.
   Use:  eyebrow-line-left                → red text + red line
         eyebrow-line-left + --inverse    → white text + red line
   ========================================================= */
.eyebrow-line-left--inverse {
  color: var(--color-text-inverse);
  background-image: linear-gradient(var(--color-brand-accent), var(--color-brand-accent));
}

/* =========================================================
   JAT — MARQUEE (service / benefit ticker)
   ========================================================= */
.marquee { overflow: hidden; }
.marquee__track {
  display: flex;
  width: max-content;
  animation: jat-marquee 60s linear infinite;
}
.marquee__item {
  display: flex;
  align-items: center;
  white-space: nowrap;
  font-variation-settings: "wght" 900, "wdth" 115, "ital" 1;
}
.marquee__item::after {
  content: "";
  width: 10px; height: 10px;
  margin-inline: var(--space-fluid-lg);
  background: var(--color-background-dark);
  transform: rotate(45deg);
  flex: none;
}
@keyframes jat-marquee { to { transform: translateX(-50%); } }
@media (prefers-reduced-motion: reduce) { .marquee__track { animation: none; } }

/* =========================================================
   JAT — CHECK LIST (Responsibilities / Qualifications WYSIWYG)
   ========================================================= */
.check-list ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 18px; }
.check-list li {
  position: relative;
  padding-left: calc(28px + 14px);
  font-family: var(--font-family-body);
  font-size: var(--font-size-body-base);
  line-height: var(--leading-relaxed);
  color: var(--color-text-primary);
}
.check-list li::before {
  content: "";
  position: absolute; left: 0; top: 0;
  width: 28px; height: 28px;
  border-radius: var(--radius-sm);
  background: var(--color-background-dark)
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='2.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12l5 5L20 7'/%3E%3C/svg%3E")
    center / 15px no-repeat;
}
.check-list--inverse li { color: var(--color-text-inverse-muted); }
.check-list--inverse li::before { background-color: var(--color-brand-accent); }

/* =========================================================
   JAT — PROCESS STEPS rail
   ========================================================= */
.process-steps::before {
  content: "";
  position: absolute; left: 23px; top: 24px; bottom: 24px; width: 2px;
  background: linear-gradient(var(--color-brand-accent), var(--color-brand-accent-alpha-24));
}
.process-step { position: relative; }

/* Zero the default div padding so the 48px number circles sit
   centred on the rail (rail centre = 24px from the left edge). */
.elementor .e-con.process-steps { padding: 0; }
.elementor .process-steps > .process-step { padding-inline: 0; }

/* Number circle: page-colour gap ring + thin red outline */
.elementor .process-step__num {
  font-stretch: 78%;
  box-shadow: 0 0 0 1px color-mix(in srgb, var(--color-brand-accent) 40%, transparent);
}

/* On a dark section (e.g. Single Career "Apply"): light step text */
.elementor .section-dark .process-step :is(h2, h3, h4) { color: var(--color-text-inverse); }
.elementor .section-dark .process-step p:not(.process-step__num) { color: var(--color-text-inverse-muted); }

/* =========================================================
   JAT — ANGLED MEDIA
   ========================================================= */
.media-angled > .e-con:not(.quote-card), .media-angled > img, .media-angled .section-image-fill {
  clip-path: polygon(14% 0, 100% 0, 100% 100%, 0 100%);
}
/* The quote card overlaps the angled edge — never clip it, and let it
   hang outside the frame (the frame's overflow would crop its shadow). */
.elementor .media-angled:has(> .quote-card) { overflow: visible; }
/* Quote card (per mockup): stack-sm zeroes padding, so restore it;
   size the red quote mark and quote text down to card scale. */
.elementor .e-con.quote-card { padding: 24px 26px; gap: 10px; }
.elementor .quote-card .text-display { font-size: 48px; line-height: 0.6; margin-top: 12px; }
.elementor .quote-card .text-h6 { font-size: 1rem; line-height: 1.5; letter-spacing: 0; }
.elementor .media-angled > .section-image-fill { border-radius: 0 var(--radius-lg, 24px) var(--radius-lg, 24px) 0; }

/* =========================================================
   JAT — BENEFITS GLASS GRID
   ========================================================= */
.benefits-glass-grid {
  background: var(--color-white-alpha-12);
  -webkit-backdrop-filter: blur(24px) saturate(140%);
  backdrop-filter: blur(24px) saturate(140%);
}
.benefits-glass-grid > * { background: rgba(19, 20, 22, .66); transition: background .3s; }
.benefits-glass-grid > *:hover { background: var(--color-brand-accent-alpha-24); }

/* Light modifier — for a benefits grid on a white section.
   Use on: Single Career "What you take home" (loop layout).
   2 columns so 10 benefits fill 5 full rows (no empty cells). */
.elementor .benefits-glass-grid.benefits-grid--light {
  background: var(--color-divider);
  border-color: var(--color-divider);
  -webkit-backdrop-filter: none;
  backdrop-filter: none;
  grid-template-columns: repeat(2, minmax(0, 1fr));
}
.elementor .benefits-glass-grid.benefits-grid--light > * { background: var(--color-background-primary); }
/* Odd count: last tile spans the full row instead of leaving a hole */
.elementor .benefits-glass-grid.benefits-grid--light > *:last-child:nth-child(odd) { grid-column: 1 / -1; }
.elementor .benefits-glass-grid.benefits-grid--light > *:hover {
  background: color-mix(in srgb, var(--color-brand-accent) 6%, var(--color-background-primary));
}
@media (max-width: 767px) {
  .elementor .benefits-glass-grid.benefits-grid--light { grid-template-columns: minmax(0, 1fr); }
}


/* =========================================================
   JAT — WATERMARK (outlined JAT in CTA)
   ========================================================= */
.watermark-jat {
  color: transparent;
  -webkit-text-stroke: 2px var(--color-white-alpha-12);
  font-variation-settings: "wght" 900, "wdth" 120, "ital" 1;
  user-select: none;
}

/* =========================================================
   JAT — HERO GLOW (optional deep-red radial, bottom-left)
   Multiply blend darkens toward blood red instead of adding
   a light red that reads orange over warm photos.
   ========================================================= */
.hero-glow {
  position: absolute; inset: 0; pointer-events: none; z-index: 1;
  background: radial-gradient(60% 50% at 0% 100%,
    color-mix(in srgb, var(--color-brand-accent-dark) 55%, #000) 0%,
    transparent 70%);
  mix-blend-mode: multiply;
  opacity: 0.85;
}

/* =========================================================
   JAT — TRUST STRIP — IN-HERO MODIFIER
   Cancels the floating negative offset when the strip sits
   inside the hero content column
   ========================================================= */
.trust-strip.trust-strip--in-hero { margin-top: var(--space-fluid-2xl); }

/* =========================================================
   JAT — PRINCIPLE LIST rows
   ========================================================= */
.principle-list > * {
  padding-block: var(--space-fluid-sm);
  border-bottom: 1px solid var(--color-divider);
}
.principle-list > *:last-child { border-bottom: 0; }

/* =========================================================
   JAT — CONTACT LIST rows (1px gaps show the divider bg)
   ========================================================= */
.contact-list > * {
  background: var(--color-background-dark-elevated);
  transition: background .25s;
}
.contact-list > *:hover { background: var(--color-background-dark-elevated-hover); }

/* =========================================================
   JAT — HIDE EMPTY CAREER FIELDS
   jat-qi-item       Quick-info item: hides when its
                     .text-meta-value is empty or missing
   jat-badge-optional Badge: hides when it has no text
   ========================================================= */
.jat-qi-item:not(:has(.text-meta-value:not(:empty))) { display: none !important; }
.jat-badge-optional:empty,
.jat-badge-optional:has(> :empty):not(:has(> :not(:empty))) { display: none !important; }