/* ════════════════════════════════════════════════════════════════════════════════════════
   nt.css — the public pages of nowtalent.co.za (5 Oct 2026): the landing page, the job board, a
   page per job, the privacy notice. They sit on the app's own sheets (/assets/css/nm-theme.css for
   light and dark, /pathways/nm-student.css for the mast, hero and focus rings, /app/talent.css for
   orange and the cards, tiles, doors and pills), so the site and the app are one language. This
   file adds only what a public page has and the app does not.
   ════════════════════════════════════════════════════════════════════════════════════════ */

/* "Under construction" (5 Oct 2026): the notice baked into each page while the setting is active;
   nm-prelaunch.js keeps it in step. Talent's deep orange, white lettering. */
#nm-prelaunch{background:#C2410C;color:#fff;font:600 14px/1.45 Arimo,Arial,sans-serif;text-align:center;padding:10px 16px}
#nm-prelaunch .nmpl-msg{display:block}
#nm-prelaunch .nmpl-more{display:block;font-weight:400;font-size:13px}
#nm-prelaunch .nmpl-more:empty{display:none}
#nm-prelaunch a{color:#fff}
@media print{#nm-prelaunch{display:none}}

/* the mast's links: on a phone, the two that matter */
@media(max-width:600px){ .nm-mast .r .wide{display:none} }

.wrap.site{padding-bottom:40px}
.lede{font-size:15px;color:var(--mid);max-width:62ch;line-height:1.6}
.section{margin-top:34px}
.section > h2{font-size:20px;margin-bottom:4px}
.section > .lede{margin-bottom:14px}

/* the two sides, split */
.sides{display:grid;grid-template-columns:1fr 1fr;gap:14px}
@media(max-width:700px){ .sides{grid-template-columns:1fr} }
.side{background:var(--white);border:1px solid var(--border);border-radius:14px;padding:20px 22px;display:flex;flex-direction:column;gap:10px}
.side h2{font-size:19px}
.side p{font-size:14.5px;color:var(--mid);line-height:1.6}
.side .acts{display:flex;gap:10px;flex-wrap:wrap;margin-top:auto;padding-top:6px}
.side .acts .btn{min-height:44px;display:inline-flex;align-items:center}

/* a role, on the landing page and the board */
.jobs{display:grid;grid-template-columns:repeat(auto-fill,minmax(min(300px,100%),1fr));gap:12px}
.job{display:flex;flex-direction:column;gap:6px;background:var(--white);border:1px solid var(--border);border-radius:12px;padding:16px 18px;text-decoration:none;color:var(--dark)}
.job:hover{border-color:var(--pink)}
.job .t{font-weight:700;font-size:15.5px;line-height:1.35}
.job .co{font-size:13.5px;color:var(--mid)}
.job .meta{display:flex;flex-wrap:wrap;gap:6px;margin-top:2px}
.job .meta span{font-size:12px;color:var(--mid);background:var(--light);border:1px solid var(--border);border-radius:99px;padding:2px 9px}
.job .when{font-size:12px;color:var(--muted);margin-top:auto;padding-top:4px}
.more{margin-top:12px;font-weight:700;font-size:14px}

/* the board's filters */
.filters{display:flex;gap:10px;flex-wrap:wrap;align-items:flex-end;margin-bottom:14px}
.filters .field{flex:1 1 200px;max-width:320px}
.filters input,.filters select{width:100%;min-height:44px}
.count{font-size:13px;color:var(--muted);margin:0 0 10px}
.career-chip{font-size:13.5px;margin:-4px 0 12px;font-weight:600}
.career-chip a{margin-left:6px;font-weight:400}

/* a job's own page */
.crumbs{font-size:13px;margin-bottom:12px}
.crumbs a{font-weight:700;text-decoration:none}
.jobhead{display:flex;gap:16px;align-items:flex-start;flex-wrap:wrap}
.jobhead .logo{width:56px;height:56px;border-radius:12px;border:1px solid var(--border);background:var(--white);object-fit:contain;flex-shrink:0}
.jobhead .initial{width:56px;height:56px;border-radius:12px;background:var(--pink-10);color:var(--pink-text);display:flex;align-items:center;justify-content:center;font-weight:800;font-size:22px;flex-shrink:0}
.jobhead h1{font-family:'Fraunces',Georgia,serif;font-weight:500;font-size:clamp(1.4rem,3.6vw,1.9rem);line-height:1.2}
.jobhead .co{font-size:15px;color:var(--mid);margin-top:2px}
.facts{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:10px;margin:18px 0}
.facts div{background:var(--light);border:1px solid var(--border);border-radius:10px;padding:10px 12px}
.facts b{display:block;font-size:11px;letter-spacing:.05em;text-transform:uppercase;color:var(--muted);margin-bottom:2px}
.facts span{font-size:14px}
.prose{font-size:15px;line-height:1.7;max-width:70ch}
.prose p+p{margin-top:12px}
.prose ul{margin:10px 0 0 20px}
.apply{display:flex;gap:10px;flex-wrap:wrap;align-items:center;margin-top:22px}
.apply .btn{min-height:44px;display:inline-flex;align-items:center}
.apply .hint{flex-basis:100%}

/* the foot of every public page */
.sitefoot{margin-top:40px;border-top:1px solid var(--border);padding-top:16px;font-size:12.5px;color:var(--muted);line-height:1.8}
.sitefoot a{font-weight:700;text-decoration:none}
.sitefoot nav{display:flex;gap:14px;flex-wrap:wrap}

/* the hidden attribute wins over the display the cards and notes set */
[hidden]{display:none!important}

/* three to a row on the public pages, so a set of three never leaves one alone */
.site .tiles{grid-template-columns:repeat(auto-fit,minmax(min(260px,100%),1fr))}
/* a job's own text: lists sit close, with a paragraph's space either side */
.prose li{margin:3px 0}
.prose p+ul,.prose ul+p{margin-top:12px}

/* a job page's share links (5 Oct 2026) */
.share{margin-top:14px}
.share h2{font-size:16px;margin-bottom:10px}
.sharebar{display:flex;flex-wrap:wrap;gap:8px}
.sharebar .btn{min-height:44px;display:inline-flex;align-items:center}

/* the earnings statement check (7 Oct 2026) */
.vbanner{border-radius:10px;padding:10px 14px;font-size:14px;margin-bottom:12px}
.vbanner.ok{background:#e7f6ec;border:1px solid #b6e2c4;color:#166534}
.vbanner.old{background:#fff6e0;border:1px solid #f1d48a;color:#7c5a0b}
.vlist{display:grid;grid-template-columns:minmax(150px,auto) 1fr;gap:6px 14px;margin:0;font-size:14px}
.vlist dt{color:var(--mid)} .vlist dd{margin:0;font-weight:600}
@media (max-width:480px){.vlist{grid-template-columns:1fr}.vlist dd{margin-bottom:6px}}

/* Giving a reference (7 Oct 2026): /reference/?t=… — mobile first */
.rf{max-width:680px;margin:0 auto}
.rf h1{font-size:23px;margin-top:2px;outline:none}
.rf-step{margin-top:16px;padding:12px 14px;border:1px solid var(--border);border-radius:12px;background:var(--light);font-size:14px}
.rf-acts{display:flex;gap:8px;flex-wrap:wrap;margin-top:14px}
.rf-acts .btn{min-height:46px}
.rf-quiet{margin-top:18px;font-size:13px}
.rf-quiet .btn.link{color:var(--mid)}
.rf-code{display:flex;gap:8px;flex-wrap:wrap;align-items:flex-end;margin-top:14px}
.rf-code .field{flex:1 1 180px;margin:0}
.rf-code input{font-size:22px;letter-spacing:.3em;text-align:center}
.rf-comp,.rf-q{border:1px solid var(--border);border-radius:12px;padding:12px 14px;margin:14px 0 0;background:var(--white)}
.rf-comp legend,.rf-q legend{font-weight:700;font-size:15px;padding:0 4px;display:flex;gap:8px;align-items:center}
.rf-q.field{padding:12px 14px}
.rf-n{flex:none;width:24px;height:24px;border-radius:50%;background:var(--pink-10);color:var(--pink-text);font-size:12px;display:inline-flex;align-items:center;justify-content:center}
.rf-def{font-size:13.5px;color:var(--mid);margin:4px 0 8px}
.rf-scale{display:grid;gap:6px}
.rf-opt{display:flex;gap:10px;align-items:center;border:1px solid var(--border);border-radius:10px;padding:10px 12px;min-height:46px;cursor:pointer;font-size:14px;background:var(--white)}
.rf-opt input{width:auto;flex:none;margin:0}
.rf-opt:has(input:checked){border-color:var(--t-deco);background:var(--pink-10)}
.rf-opt.none{border-style:dashed;color:var(--mid)}
.rf-row{display:flex;gap:8px;flex-wrap:wrap}
.rf-opt.inline{flex:1 1 90px;justify-content:center}
.rf-h2{font-size:17px;margin:22px 0 0}
.rf .req{color:var(--pink-text)}
.rf .miss{border-color:var(--red);box-shadow:0 0 0 2px var(--red-10)}
.rf-decl{margin-top:18px;align-items:flex-start;font-size:14px}
.rf-decl input{margin-top:3px}
.rf-reqnote{font-size:12.5px;margin-top:8px}
.rf-popia{max-width:680px;margin:14px auto 0;font-size:12.5px;color:var(--mid);text-align:center}
@media (min-width:640px){ .rf-scale{grid-template-columns:repeat(auto-fit,minmax(170px,1fr))} .rf-opt.none{grid-column:1/-1} }