/* ============================================================================
   Art of Interviews, shared foundation
   ----------------------------------------------------------------------------
   Single source of truth for design tokens and the type scale. Previously every
   page re-declared its own colours, fonts and font-sizes inline, which is how
   type drifted small and inconsistent. Adopt these tokens instead of magic
   numbers, e.g.  .card p { font-size: var(--fs-sm); }

   LOADING
     Linked in each page <head> BEFORE that page's inline <style>. That ordering
     is deliberate: any rule a page already defines still wins, so adding this
     file changes nothing visually on its own. It only fills gaps and provides
     the tokens. Retire duplicated inline tokens/reset page-by-page over time.

   NO BUILD STEP
     Plain CSS with custom properties, matching the site's manual-upload
     workflow. No SCSS compile required.

   TYPE SCALE (rem, base 16px). Readability floor for body/card copy is --fs-sm.
   Reserve --fs-2xs / --fs-xs for eyebrows, legal lines and dense metadata.
   ============================================================================ */

:root {
  /* ---- Colour: brand + neutrals ---- */
  --cream: #FAF7F2;
  --linen: #EDE9E1;
  --charcoal: #2C2C2C;
  --muted: #6B6459;
  --line: #E2DDD2;
  --card: #FFFFFF;
  --terracotta: #C4703E;
  --terracotta-dark: #A85A2E;
  --navy: #1a3a5c;
  --teal: #1B6B5A;
  --indigo: #4A3F6B;
  --action: #1B6B5A;
  --action-hover: #17594B;

  /* ---- Fonts ---- */
  --font-heading: 'Cormorant Garamond', Georgia, serif;
  --font-body: 'DM Sans', system-ui, -apple-system, sans-serif;

  /* ---- Type scale ---- */
  --fs-2xs: 0.6875rem;  /* 11px  eyebrows, legal, uppercase labels        */
  --fs-xs:  0.75rem;    /* 12px  dense metadata, captions                 */
  --fs-sm:  0.8125rem;  /* 13px  secondary copy (readability floor)       */
  --fs-body:0.9375rem;  /* 15px  comfortable card / list body copy        */
  --fs-base:1rem;       /* 16px  default body text                        */
  --fs-md:  1.125rem;   /* 18px  lead paragraphs, sub-headings            */
  --fs-lg:  1.375rem;   /* 22px  card titles                              */
  --fs-xl:  1.75rem;    /* 28px  section headings                         */
  --fs-2xl: 2.25rem;    /* 36px  page headings                            */
  --fs-3xl: clamp(2.5rem, 5vw, 3.5rem); /* fluid hero headline            */

  --lh-tight: 1.2;
  --lh-snug:  1.4;
  --lh-body:  1.6;

  /* ---- Spacing ---- */
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 24px;
  --space-6: 32px;
  --space-7: 48px;
  --space-8: 64px;

  /* ---- Radius + shadow ---- */
  --radius-sm: 8px;
  --radius: 12px;
  --radius-lg: 16px;
  --shadow-sm: 0 1px 3px rgba(0,0,0,.06);
  --shadow: 0 8px 24px rgba(0,0,0,.08);

  /* Reference breakpoints (media queries can't read custom properties):
     600 (sm) · 768 (md) · 880 (lg) · 1080 (xl). Prefer these when adding new ones. */
}

/* ---- Minimal, non-destructive reset ----
   Deliberately conservative. Every real page already sets box-sizing:border-box
   and its own body/link/heading type, and is linked AFTER this file, so it wins.
   We do NOT set body font/colour/line-height here: that would change pages which
   rely on browser defaults (e.g. the JS-rendered legal pages). Base typography is
   adopted per page during the inline-CSS trim, not forced globally. */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
img, svg, video, canvas { max-width: 100%; }
button, input, select, textarea { font-family: inherit; }

/* iOS zooms the whole page when a focused field's font-size is under 16px,
   and does not zoom back out afterwards, so the rest of the form ends up off
   screen and has to be pinched back.

   This rule is the one place in this file that overrides the page instead of
   filling a gap, and it is deliberate. The file is linked before each page's
   inline <style> precisely so the page wins, but every page styles its fields
   through a class (.form-group input, .field input, #jdInput) which outranks a
   bare element selector no matter what the order is. So the guard was here,
   correct, and doing nothing: measured at 13-15px on the login form, the home
   hero, the profile, the search brief, the cover letter and the JD analyser.

   !important is the only thing that reaches all of them without editing every
   page. If a field genuinely needs to be smaller than 16px on a phone, it
   needs its own !important and a reason. */
@media (max-width: 700px) {
  input, select, textarea { font-size: 16px !important; }
}

/* ── Turnstile inside a horizontal form row ─────────────────────────────────
   A script dropped <div data-turnstile> between the email field and the submit
   button on five forms, and four of those forms are single-row flex layouts.
   The widget is a fixed 300x65 white iframe that will not reflow, so on the
   home hero it landed as a white plate in the middle of a dark glass panel,
   between the input and the button.

   Two things fix it, and both are needed:

     1. data-turnstile-appearance="interaction-only" on the container, so
        Cloudflare paints nothing at all unless a visitor genuinely has to
        click something. The token still arrives on its own.
     2. This rule, so that on the rare occasion a challenge IS shown, it takes
        its own line underneath rather than squeezing the row. flex-basis:100%
        plus wrap on the parent is what does that; order:1 keeps it below the
        button rather than between the two controls.

   :empty is the load-bearing selector. Turnstile inserts an iframe only when
   it decides to draw, so an untouched container stays genuinely zero-sized
   instead of reserving 65px of nothing. */
.ts-inline:empty { display: none; }
.ts-inline {
  flex-basis: 100%;
  order: 1;
  margin: 12px 0 0;
}
.hero__signup,
.capture__form,
.signup-form,
.gate-form { flex-wrap: wrap; }
