/* ============================================================
   BULKBITE - internship.css
   The internship page and the applicant assessment, and nothing
   else.
   ------------------------------------------------------------
   Colours, the display font, buttons, section bands, the header,
   the footer and every form primitive come from css/styles.css
   unchanged. This file is only what these two pages have that no
   other page does.

   Two namespaces, deliberately:
     .in-   /internship, the public page about the role
     .ex-   /apply, the assessment itself
   They are separate because the pages have opposite jobs. The
   first is read; the second is answered, one question at a time.

   WHY THE ASSESSMENT SITS ON THE DARK BAND
   .field, .err, .check, .spinner, .form-status and .success-mark
   in styles.css are all written for white text on ink. Restyling
   them for paper here would be a second copy of the form styling,
   and two copies drift. So /apply uses .section-cta and this file
   adds nothing that a form already has.

   MOBILE FIRST, AND NOT AS A SLOGAN
   Most applicants are on a phone, standing up, in a hurry. Every
   tap target here is at least 44px, every option is the whole row
   rather than the radio, and nothing in the assessment needs a
   sideways scroll or a pinch.
   ============================================================ */

/* ============================================================
   THE INTERNSHIP PAGE
   ============================================================ */

/* ---------- the first screen ----------
   Dark, like the homepage and the About hero, so the page reads as
   part of the site rather than a careers add-on. One column at
   every width: this hero is a paragraph and a button, and a second
   column would only be a place to put something invented. */
.in-hero {
  background: var(--ink);
  color: var(--white);
  padding-block: clamp(2.8rem, 9vw, 5.5rem);
}
.in-hero .eyebrow { color: var(--accent); }
/* Centred, like the homepage hero on a phone: the hero is a title,
   a paragraph and a button, and all three sit on the page axis. */
.in-hero .wrap { text-align: center; }
.in-title {
  font-family: var(--display);
  font-size: clamp(2.5rem, 11vw, 4.4rem);
  line-height: .95;
  text-transform: uppercase;
  letter-spacing: .01em;
  margin: .2rem 0 1rem;
}
.in-lead {
  font-size: clamp(1.05rem, 3vw, 1.2rem);
  color: rgba(255, 255, 255, .84);
  max-width: 54ch;
  margin: 0 auto 1.6rem;
}

/* The state line while the round is being checked. Deliberately
   quiet: it is replaced within a moment, and a prominent spinner
   would make a fast connection look like a slow one. */
.in-checking {
  font-size: .92rem;
  color: rgba(255, 255, 255, .6);
  margin: 0;
}

.in-cta { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: .8rem 1.1rem; }
.in-cta-note {
  font-size: .88rem;
  color: rgba(255, 255, 255, .68);
  margin: 0;
}
.in-cta-note:empty { display: none; }
.in-cta-end { margin-top: 2rem; }

/* Applications closed. Bordered rather than tinted, because a
   filled panel in the hero reads as an error and this is not one -
   it is the normal state for most of the year. Ruled along the top
   rather than the left, because a left rule under centred text
   points at an edge the copy no longer uses. */
.in-closed {
  border: 1px solid var(--line-dark);
  border-top: 4px solid var(--amber);
  border-radius: var(--radius);
  padding: 1rem 1.2rem;
  max-width: 56ch;
  margin-inline: auto;
}
.in-closed p { margin: 0 0 .5rem; color: rgba(255, 255, 255, .8); font-size: .95rem; }
.in-closed p:last-child { margin-bottom: 0; }
.in-closed strong { color: var(--white); }

/* ---------- section introductions ----------
   The same axis as the homepage: the eyebrow, title and lede of each
   band are centred, and the copy under them keeps a left reading
   edge inside a centred column. */
:is(#role, #what-we-are, #applying) > .wrap > :is(.eyebrow, .section-title, .section-lede) {
  text-align: center;
  margin-inline: auto;
}
:is(#role, #what-we-are, #applying) > .wrap > .section-title {
  max-width: 19ch;
  text-wrap: balance;
}

/* ---------- the three parts of the work ----------
   This band runs at the full wrap rather than the narrow one, like
   the homepage cards: three across in 760px left each card about
   200px of text, which wrapped every other word. */
.in-cards {
  display: grid; gap: 1rem;
  width: min(100%, 1060px);
  margin: 1.6rem auto 1.4rem;
}
@media (min-width: 860px) {
  .in-cards { grid-template-columns: repeat(3, 1fr); }
}
.in-cards .card h3 {
  font-family: var(--display);
  font-size: 1.2rem;
  text-transform: uppercase;
  margin-bottom: .4rem;
}
.in-cards .card p { margin: 0; font-size: .95rem; color: var(--muted); max-width: 36ch; }

.in-fine {
  font-size: .92rem;
  color: var(--muted);
  max-width: 62ch;
  margin-inline: auto;
  text-align: center;
  border-top: 1px solid var(--line);
  padding-top: 1rem;
}

/* ---------- what BulkBite is ----------
   The four facts about the service. On orange, at body size and not
   smaller, because this is the part of the page that has to be read
   rather than skimmed. Each fact leads with the claim in bold and
   then says what it rules out, so somebody reading only the bold
   text still has all four.

   The marker is a square rather than a bullet: on orange a round
   dot at this size disappears into the tracking. */
.in-facts {
  list-style: none;
  margin: 1.4rem auto 1.2rem;
  padding: 0;
  display: grid;
  gap: .9rem;
  max-width: 60ch;
}
.in-facts li {
  position: relative;
  padding-left: 1.6rem;
  font-size: clamp(1rem, 2.6vw, 1.08rem);
  line-height: 1.5;
}
.in-facts li::before {
  content: '';
  position: absolute;
  left: 0; top: .5em;
  width: .6rem; height: .6rem;
  background: var(--ink);
}
.in-facts strong { display: block; }

/* And what is NOT true, in one sentence. Boxed in ink on orange so
   it cannot be skipped: these are the four things people most often
   assume about us and get wrong. */
.in-not {
  background: var(--ink);
  color: var(--white);
  border-radius: var(--radius);
  padding: .9rem 1.1rem;
  max-width: 60ch;
  font-size: .98rem;
  font-weight: 600;
  margin: 0 auto;
  text-align: center;
}

.in-prose { max-width: 62ch; margin-inline: auto; }
.in-prose p { margin-bottom: .9rem; }

/* The POPIA notice. Framed, because it is a commitment and not a
   paragraph of the sales copy around it. */
.in-privacy {
  margin: 1.6rem auto 0;
  padding: 1.1rem 1.25rem;
  border: 1px solid var(--line);
  border-left: 4px solid var(--accent);
  border-radius: var(--radius);
  background: var(--white);
  max-width: 62ch;
}
.in-privacy h3 {
  font-family: var(--display);
  font-size: 1.05rem;
  text-transform: uppercase;
  margin-bottom: .5rem;
}
.in-privacy p { font-size: .92rem; color: var(--muted); margin-bottom: .6rem; }
.in-privacy p:last-child { margin-bottom: 0; }

/* ============================================================
   THE ASSESSMENT
   ============================================================ */

.ex-section { min-height: 70vh; }
/* The band grows to fill the screen, so the one-line footer sits on
   the bottom edge instead of floating above white on a short
   screen like the closed notice. */
body:has(.ex-section) {
  display: flex; flex-direction: column;
  min-height: 100vh; min-height: 100svh;
}
body:has(.ex-section) > main { flex: 1 0 auto; display: flex; flex-direction: column; }
.ex-section { flex: 1 0 auto; }
.ex-checking { color: rgba(255, 255, 255, .6); margin: 0; text-align: center; }
.ex-panel:focus { outline: none; }
.ex-prose { max-width: 58ch; }
.ex-prose p { margin-bottom: .9rem; color: rgba(255, 255, 255, .84); }
.ex-form { margin-top: 1.6rem; }
.ex-help {
  font-size: .85rem;
  color: rgba(255, 255, 255, .62);
  margin: .35rem 0 0;
}
.ex-help a { color: inherit; text-decoration: underline; text-underline-offset: 2px; }

/* /apply has only the footer's bottom line. The full footer's top
   padding and divider left an empty band above it, and the bottom
   padding clears a sticky CTA this page does not have. */
.ex-footer { padding-top: 0; padding-bottom: env(safe-area-inset-bottom); }
.ex-footer .footer-bottom { border-top: 0; }

.ex-actions {
  display: flex; flex-wrap: wrap; justify-content: center; gap: .7rem;
  margin-top: 1.6rem;
}

/* Every screen opens on the page axis - the intro, the closed notice
   and the endings alike - so moving between them does not jump the
   heading from the left edge to the centre. The form and the
   questions keep a left edge: they are worked through, not read. */
.ex-panel > :is(.eyebrow, .section-title, .section-lede) {
  text-align: center;
  margin-inline: auto;
}
.ex-panel > .section-title { text-wrap: balance; }
#ex-intro > .ex-prose { margin-inline: auto; text-align: center; }

/* ---------- the question bar ----------
   Sticky, so "Question 12 of 24" stays readable while a long option
   list is scrolled. Backed with the band's own colour rather than a
   blur: text scrolling under a translucent bar is unreadable on a
   cheap screen in daylight. No clock: the assessment is untimed. */
.ex-bar {
  position: sticky;
  top: 0;
  z-index: 2;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  padding: .7rem 0;
  margin-bottom: 1.1rem;
  background: var(--ink);
  border-bottom: 1px solid var(--line-dark);
}
.ex-count {
  margin: 0;
  flex: 0 0 auto;
  font-size: var(--micro);
  letter-spacing: .1em;
  text-transform: uppercase;
  font-weight: 800;
  color: rgba(255, 255, 255, .6);
}
/* Progress is the questions done, not the time left, so it only
   ever moves forward. */
.ex-progress {
  flex: 1 1 auto;
  max-width: 14rem;
  height: 6px;
  border-radius: 999px;
  background: rgba(255, 255, 255, .12);
  overflow: hidden;
}
.ex-progress span {
  display: block;
  height: 100%;
  width: 0;
  background: var(--accent);
  border-radius: inherit;
  transition: width .3s ease;
}

/* ---------- the question ---------- */
.ex-prompt {
  font-family: var(--display);
  font-size: clamp(1.4rem, 5vw, 2rem);
  line-height: 1.1;
  text-transform: none;
  margin: 0 0 1.1rem;
  max-width: 34ch;
}

/* The situation before the question. Body size, full contrast: it
   is the part people skim and then get wrong. */
.ex-context {
  font-size: 1.02rem;
  line-height: 1.6;
  color: rgba(255, 255, 255, .88);
  margin: 0 0 .8rem;
  max-width: 62ch;
}
/* styles.css resets list-style for navigation lists, so the bullets
   are put back: without them "6 chicken / 5 beef" reads as loose
   lines rather than a count. */
.ex-list {
  list-style: disc;
  margin: 0 0 1rem;
  padding-left: 1.3rem;
  color: rgba(255, 255, 255, .88);
  line-height: 1.6;
}
.ex-list li { margin-bottom: .2rem; }
.ex-list li::marker { color: var(--accent); }

/* A supervisor's instruction, quoted. Ruled in amber, like a note
   pinned to the pass, so it reads as somebody else's words. */
.ex-quote {
  border-left: 4px solid var(--amber);
  margin: 0 0 1rem;
  padding: .6rem 0 .6rem 1rem;
  font-size: 1.05rem;
  line-height: 1.55;
  font-style: italic;
  color: var(--white);
  max-width: 58ch;
}

/* Question 23's integral. Large and centred so it is read as the
   thing being asked, in a serif stack that carries the integral
   sign and the subscripts properly. */
.ex-formula {
  font-family: "Cambria Math", "STIX Two Math", "Times New Roman", serif;
  font-size: clamp(1.8rem, 8vw, 2.6rem);
  text-align: center;
  margin: .4rem 0 1.2rem;
  color: var(--white);
}

/* Questions 23 and 24's "this is meant to be hard". An instruction,
   not information, so it is amber on ink and above everything. */
.ex-notice {
  background: var(--amber);
  color: var(--ink);
  border-radius: var(--radius);
  padding: .75rem 1rem;
  margin: 0 0 1rem;
  font-weight: 700;
  font-size: .98rem;
  max-width: 52ch;
}

/* ---------- the options ----------
   The whole row is the target, not the radio. 44px minimum, which
   is the smallest thing a thumb hits reliably. */
.ex-options { display: grid; gap: .6rem; margin-bottom: 1.4rem; }
.ex-option {
  display: flex;
  align-items: flex-start;
  gap: .7rem;
  min-height: 44px;
  padding: .85rem 1rem;
  border: 1px solid var(--line-dark);
  border-radius: var(--radius);
  background: rgba(255, 255, 255, .04);
  cursor: pointer;
  font-size: .98rem;
  line-height: 1.5;
  transition: border-color .15s ease, background .15s ease;
}
.ex-option:hover { background: rgba(255, 255, 255, .08); }
/* The real radio, kept and styled rather than hidden. A hidden
   input with a drawn circle is what breaks Windows high contrast
   and Voice Control. */
.ex-option input[type="radio"] {
  appearance: none;
  flex: 0 0 auto;
  width: 22px; height: 22px;
  margin-top: .15em;
  border: 2px solid rgba(255, 255, 255, .5);
  border-radius: 50%;
  background: transparent;
  cursor: pointer;
}
.ex-option input[type="radio"]:checked {
  border-color: var(--accent);
  box-shadow: inset 0 0 0 5px var(--accent);
}
/* The letter, by position on screen. Question 1 asks for "the third
   option", so the letters have to be there to be counted. */
.ex-letter {
  flex: 0 0 auto;
  min-width: 1.2rem;
  font-weight: 800;
  color: rgba(255, 255, 255, .55);
}
.ex-option-text { flex: 1 1 auto; }
.ex-option:has(input:checked) {
  border-color: var(--accent);
  background: rgba(255, 90, 31, .12);
}
.ex-option:has(input:checked) .ex-letter { color: var(--accent); }
/* Focus on the row, not just the 22px circle. */
.ex-option:has(input:focus-visible) {
  outline: 3px solid var(--accent);
  outline-offset: 2px;
}

/* An answer, or "I don't know". Side by side on a laptop and
   stacked on a phone, the same size, so neither reads as the
   expected one. */
.ex-open-actions { display: grid; gap: .6rem; margin-top: .4rem; }
@media (min-width: 560px) {
  .ex-open-actions { grid-template-columns: 1fr 1fr; }
}

/* ---------- PayBack and the last question ---------- */
.ex-payback { margin: 0 auto 1.6rem; }
.ex-payback p { color: rgba(255, 255, 255, .88); }
.ex-payback strong { color: var(--amber); }

.ex-lead-in {
  font-size: 1.05rem;
  color: rgba(255, 255, 255, .78);
  text-align: center;
  margin: 0 0 .4rem;
}
.ex-food-label {
  font-family: var(--display);
  font-size: clamp(1.5rem, 6vw, 2.1rem) !important;
  line-height: 1.1;
  text-transform: none;
  letter-spacing: 0;
  display: block;
  margin-bottom: .7rem;
}

/* ---------- the endings ---------- */
.ex-end { text-align: center; }
.ex-end .ex-prose { margin-inline: auto; }
.ex-end .ex-prose p { font-size: 1.02rem; }
.ex-end .section-lede:empty { display: none; }

/* PayBack interest, under the result. Framed and quiet: the result
   is the news, this is the offer after it. */
.ex-interest {
  margin: 1.8rem auto 0;
  padding: 1.1rem 1.2rem;
  border: 1px solid var(--line-dark);
  border-radius: var(--radius);
  max-width: 46ch;
  text-align: center;
}
.ex-interest-title { margin: 0 0 .7rem; font-weight: 700; }
.ex-interest-done { margin: .6rem 0 0; font-size: .92rem; color: var(--amber); }
.ex-interest-done:empty { display: none; }

/* ---------- reduced motion ---------- */
@media (prefers-reduced-motion: reduce) {
  .ex-option, .in-cards .card, .ex-progress span { transition: none; }
}