/* UfanisiDocs sign-in page.
 *
 * Hand-written rather than generated: this is the only page that used the
 * Tailwind build, and the committed output had drifted from the config, so
 * classes like ring-mfa-light-blue resolved to nothing.
 *
 * Design language borrows from the Ministry of Foreign & Diaspora Affairs
 * website: its navy/gold palette, the Kenyan flag band, and the guilloche
 * engraving used on its section backgrounds — the same fine-line pattern
 * found on passports and banknotes. The page is dressed as a file cover,
 * because custody of files is what this system does.
 */

/* ── Fonts ─────────────────────────────────────────────────────────────── */
/* Static instances rather than the variable originals: a sign-in page should
   not depend on variable-font support, and pinning the weights we actually use
   cut the payload from 284 KB to ~81 KB. Generated with fontTools.varLib
   instancer from the Google Fonts latin subsets. */
@font-face {
  font-family: 'Public Sans';
  src: url('../fonts/public-sans-400.woff2') format('woff2');
  font-weight: 400; font-style: normal; font-display: swap;
}
@font-face {
  font-family: 'Public Sans';
  src: url('../fonts/public-sans-600.woff2') format('woff2');
  font-weight: 600; font-style: normal; font-display: swap;
}
@font-face {
  font-family: 'Source Serif 4';
  src: url('../fonts/source-serif-4-400.woff2') format('woff2');
  font-weight: 400; font-style: normal; font-display: swap;
}
@font-face {
  font-family: 'Source Serif 4';
  src: url('../fonts/source-serif-4-600.woff2') format('woff2');
  font-weight: 600; font-style: normal; font-display: swap;
}
@font-face {
  font-family: 'IBM Plex Mono';
  src: url('../fonts/ibm-plex-mono-latin.woff2') format('woff2');
  font-weight: 400; font-style: normal; font-display: swap;
}

/* ── Tokens ────────────────────────────────────────────────────────────── */
:root {
  --navy:        #012036;
  --navy-deep:   #0b1a34;
  --navy-ink:    20 41 77;      /* rgb triplet, for the engraving */
  --gold:        #be8f30;
  --gold-bright: #d9b25e;
  --paper:       #f5f8fc;
  --card:        #ffffff;
  --body:        #2b3242;
  --muted:       #55617a;
  --line:        #e3e9f2;

  --flag-black: #0b0b0c;
  --flag-red:   #b02a25;
  --flag-green: #0b6b3a;
  --flag-band:   linear-gradient(90deg, var(--flag-black) 0 33.33%, var(--flag-red) 33.33% 66.66%, var(--flag-green) 66.66% 100%);

  --sans:    'Public Sans', system-ui, -apple-system, Segoe UI, sans-serif;
  --serif:   'Source Serif 4', Georgia, 'Times New Roman', serif;
  --mono:    'IBM Plex Mono', ui-monospace, Menlo, Consolas, monospace;

  --maxw: 1120px;
  --gutter: 24px;
  --measure: 60ch;
}

*, *::before, *::after { box-sizing: border-box; }

html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  font-family: var(--sans);
  font-size: 17px;
  line-height: 1.6;
  color: var(--body);
  background: var(--card);
  -webkit-font-smoothing: antialiased;
}

.wrap { max-width: var(--maxw); margin-inline: auto; padding-inline: var(--gutter); }

a { color: inherit; }

/* Focus is a design element here, not an afterthought: this is a government
   system and keyboard users must always see where they are. */
:focus-visible {
  outline: 3px solid var(--gold-bright);
  outline-offset: 3px;
  border-radius: 2px;
}

.skip-link {
  position: absolute; left: -9999px; top: 0; z-index: 100;
  background: var(--gold); color: #1a1206;
  padding: 12px 18px; font-weight: 600;
}
.skip-link:focus { left: 0; }

/* ── The flag band ─────────────────────────────────────────────────────── */
.flag-rule { height: 4px; background: var(--flag-band); }

/* ── Header ────────────────────────────────────────────────────────────── */
.masthead { background: var(--navy); color: #fff; }
.masthead-inner {
  display: flex; align-items: center; justify-content: space-between;
  gap: 16px; min-height: 68px;
}
.wordmark { display: flex; align-items: baseline; gap: 10px; text-decoration: none; }
.wordmark strong {
  font-family: var(--serif);
  font-size: 21px; font-weight: 600; letter-spacing: .01em;
}
.wordmark span {
  font-family: var(--mono);
  font-size: 11px; letter-spacing: .14em; text-transform: uppercase;
  color: var(--gold-bright);
}
.masthead-org {
  font-size: 13px; color: #a9bdd2; text-align: right;
  display: none;
}
@media (min-width: 760px) { .masthead-org { display: block; } }

/* ── Hero: the file cover ──────────────────────────────────────────────── */
.cover {
  position: relative;
  background-color: var(--navy-deep);
  color: #fff;
  overflow: hidden;
}
/* Guilloche engraving — two offset ring grids, the same construction the
   ministry site uses. Kept at very low contrast so it reads as texture. */
.cover::before {
  content: "";
  position: absolute; inset: 0; z-index: 0; pointer-events: none;
  background-image:
    repeating-radial-gradient(circle at 18px 22px, transparent 0 13px, rgb(255 255 255 / .05) 13px 14px),
    repeating-radial-gradient(circle at 82px 62px, transparent 0 13px, rgb(190 143 48 / .10) 13px 14px);
  background-size: 120px 120px;
}
/* The Coat of Arms of the Republic of Kenya, set as a watermark the way it
   appears on official letterhead. It sits in the empty half opposite the
   left-aligned text, and only from a width where it cannot end up behind it.
   Kept faint: it should register as authority, not decoration. */
@media (min-width: 1100px) {
  .cover::after {
    content: "";
    position: absolute; z-index: 0; pointer-events: none;
    top: 50%; transform: translateY(-50%);
    /* Sit in the outer margin, clear of the text column. */
    right: max(1.5vw, calc((100% - var(--maxw)) / 2 - 70px));
    width: min(26vw, 340px);
    aspect-ratio: 640 / 619;
    background: url('../img/coat-of-arms.webp') center / contain no-repeat;
    opacity: .055;
  }
}

.cover-inner { position: relative; z-index: 1; padding-block: clamp(56px, 9vw, 108px); }

.file-ref {
  font-family: var(--mono);
  font-size: 12px; letter-spacing: .16em; text-transform: uppercase;
  color: var(--gold-bright);
  margin: 0 0 22px;
  display: flex; align-items: center; gap: 12px; flex-wrap: wrap;
}
.file-ref::after {
  content: ""; height: 1px; flex: 1 1 60px; min-width: 40px;
  background: linear-gradient(90deg, rgb(190 143 48 / .55), transparent);
}

.cover h1 {
  font-family: var(--serif);
  font-weight: 400;
  font-size: clamp(34px, 5.4vw, 62px);
  line-height: 1.08;
  letter-spacing: -.015em;
  margin: 0 0 24px;
  max-width: 21ch;
}
.cover h1 em { font-style: normal; color: var(--gold-bright); }

.cover p.lead {
  font-size: clamp(17px, 1.5vw, 19px);
  line-height: 1.65;
  color: #c6d5e4;
  max-width: var(--measure);
  margin: 0 0 34px;
}

.actions { display: flex; flex-wrap: wrap; gap: 14px; align-items: center; }

.btn {
  display: inline-flex; align-items: center; gap: 10px;
  font: inherit; font-weight: 600;
  padding: 14px 26px;
  border: 1px solid transparent;
  border-radius: 2px;              /* documents have corners, not pills */
  text-decoration: none;
  cursor: pointer;
  transition: background-color .15s ease, border-color .15s ease, color .15s ease;
}
.btn-primary { background: var(--gold); color: #1a1206; border-color: var(--gold); }
.btn-primary:hover { background: var(--gold-bright); border-color: var(--gold-bright); }
.btn-ghost { color: #dce7f2; border-color: rgb(255 255 255 / .28); }
.btn-ghost:hover { border-color: var(--gold-bright); color: #fff; }
.btn svg { width: 18px; height: 18px; flex: none; }

.access-note {
  margin: 26px 0 0;
  font-size: 14px; color: #93a8be;
  display: flex; align-items: flex-start; gap: 9px;
  max-width: 56ch;
}
.access-note svg { width: 16px; height: 16px; flex: none; margin-top: 3px; color: var(--gold-bright); }

/* ── Tasks ─────────────────────────────────────────────────────────────── */
.tasks { background: var(--paper); border-block: 1px solid var(--line); }
.tasks-inner { padding-block: clamp(48px, 7vw, 84px); }

.section-label {
  font-family: var(--mono);
  font-size: 12px; letter-spacing: .16em; text-transform: uppercase;
  color: var(--muted);
  margin: 0 0 30px;
}

.task-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 0; }
@media (min-width: 820px) {
  .task-list { grid-template-columns: repeat(3, 1fr); gap: 0; }
}

.task {
  padding: 26px 0;
  border-top: 1px solid var(--line);
}
@media (min-width: 820px) {
  .task { padding: 4px 28px 4px 0; border-top: 0; border-left: 1px solid var(--line); padding-left: 28px; }
  .task:first-child { border-left: 0; padding-left: 0; }
}
.task h2 {
  font-family: var(--serif);
  font-size: 21px; font-weight: 600; letter-spacing: -.005em;
  margin: 0 0 8px; color: var(--navy);
}
.task p { margin: 0; font-size: 15.5px; line-height: 1.6; color: var(--muted); }

/* ── Footer ────────────────────────────────────────────────────────────── */
.site-footer { background: var(--navy); color: #b7c8d9; font-size: 14.5px; }
.footer-inner {
  padding-block: 40px;
  display: grid; gap: 26px;
}
@media (min-width: 760px) {
  .footer-inner { grid-template-columns: 1.4fr 1fr 1fr; gap: 40px; }
}
.site-footer h3 {
  font-family: var(--mono);
  font-size: 11px; letter-spacing: .16em; text-transform: uppercase;
  color: #7d94ac; margin: 0 0 12px; font-weight: 400;
}
.site-footer p { margin: 0 0 6px; }
.site-footer ul { list-style: none; margin: 0; padding: 0; }
.site-footer li { margin-bottom: 7px; }
.site-footer a { color: #dbe6f1; text-decoration: none; border-bottom: 1px solid rgb(219 230 241 / .28); }
.site-footer a:hover { color: #fff; border-bottom-color: var(--gold-bright); }
.footer-name { font-family: var(--serif); font-size: 17px; color: #fff; margin-bottom: 10px; }
.colophon {
  border-top: 1px solid rgb(255 255 255 / .12);
  padding-block: 18px;
  display: flex; flex-wrap: wrap; gap: 8px 20px; justify-content: space-between;
  font-size: 13px; color: #8ba1b8;
}
.colophon code { font-family: var(--mono); font-size: 12px; }

/* ── Motion ────────────────────────────────────────────────────────────── */
@media (prefers-reduced-motion: no-preference) {
  .cover-inner > * { animation: rise .5s cubic-bezier(.2,.7,.3,1) backwards; }
  .cover-inner > *:nth-child(2) { animation-delay: .06s; }
  .cover-inner > *:nth-child(3) { animation-delay: .12s; }
  .cover-inner > *:nth-child(4) { animation-delay: .18s; }
  .cover-inner > *:nth-child(5) { animation-delay: .24s; }
  @keyframes rise { from { opacity: 0; transform: translateY(9px); } to { opacity: 1; transform: none; } }
}

@media print {
  .cover { background: #fff; color: #000; }
  .cover::before, .cover::after { display: none; }
}