/* Funding layout.

   Tokens and the es- components come from educationsector.css, the canonical
   EducationSector design system, which this page links first. This file adds only what
   that portable file does not carry - the site header, the brand mark and page layout -
   and it matches the shipped pattern in jobs.educationsector.uk, which CLAUDE.md records
   as the closest thing in the estate to canon.

   No colour here is invented. Everything resolves to an --es- token. */

/* The canonical --es-font is `var(--font-manrope), "Manrope", "Segoe UI", Arial,
   sans-serif`. --font-manrope is a Next.js font variable that exists only on
   ui.educationsector.uk; anywhere else it is undefined, and an undefined var() with no
   fallback invalidates the whole custom property at computed-value time. --es-font then
   resolves to nothing and every page consuming the portable stylesheet silently falls
   back to Times New Roman. Defining the variable restores the intended stack without
   editing the canonical file. Any application adopting educationsector.css needs this. */
:root { --font-manrope: "Manrope"; }

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

body {
  margin: 0;
  font-family: var(--es-font);
  color: var(--es-ink);
  background: var(--es-paper);
  -webkit-font-smoothing: antialiased;
}

a { color: inherit; }

/* --- site header -------------------------------------------------------------- */

.site-header {
  height: 78px;
  padding: 0 clamp(22px, 4vw, 68px);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--es-space-6);
  background: var(--es-paper);
  border-bottom: 1px solid var(--es-line);
  position: sticky;
  top: 0;
  z-index: 10;
}

.brand {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  font-size: 17px;
  font-weight: 760;
  letter-spacing: -.035em;
  text-decoration: none;
}

/* The product name sits in a pill beside the wordmark, as on Jobs. */
.brand b {
  color: #4c35a5;
  background: #eee9ff;
  border-radius: 4px;
  padding: 4px 6px;
  font-size: 11px;
  letter-spacing: .02em;
}

/* Seven cells of a three-by-three grid, forming the EducationSector corner mark. */
.es-mark { display: grid; grid-template: repeat(3, 5px) / repeat(3, 5px); gap: 2px; width: 19px; }
.es-mark i { display: block; background: currentColor; border-radius: 2px; }
.es-mark i:nth-child(4) { grid-area: 2 / 1; }
.es-mark i:nth-child(5) { grid-area: 3 / 1; }
.es-mark i:nth-child(6) { grid-area: 3 / 2; }
.es-mark i:nth-child(7) { grid-area: 3 / 3; }

.site-header nav { display: flex; gap: 28px; }
.site-header nav a { color: var(--es-muted); font-size: 13px; font-weight: 650; text-decoration: none; }
.site-header nav a:hover { color: var(--es-green-dark); }

/* Signed-in state. Declared here, with the other header rules, so the narrow-screen
   override further down actually wins: an appended block after the media queries would
   have the same specificity and later source order, and would silently beat them. */
.site-header nav form { margin: 0; display: flex; }
.signed-in {
  color: var(--es-ink);
  font-size: 13px;
  font-weight: 700;
  max-width: 22ch;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* --- page --------------------------------------------------------------------- */

main { max-width: 1120px; margin: 0 auto; padding: 0 24px 72px; }

.hero { padding: 78px 0 40px; max-width: 900px; }

.eyebrow {
  margin: 0;
  color: var(--es-green-dark);
  font-size: 11px;
  font-weight: 800;
  letter-spacing: .17em;
  text-transform: uppercase;
}

.hero h1 {
  margin: 18px 0;
  font-size: clamp(46px, 7vw, 82px);
  line-height: .96;
  letter-spacing: -.065em;
}

.hero h1 em { color: var(--es-purple); font-style: normal; }

.lead { margin: 0; color: var(--es-muted); font-size: 20px; line-height: 1.55; }

/* --- search ------------------------------------------------------------------- */

.search {
  display: grid;
  grid-template-columns: 1.5fr .8fr 1.2fr auto;
  gap: 10px;
  align-items: end;
  margin: 38px 0 0;
  padding: 18px;
  background: var(--es-surface);
  border: 1px solid var(--es-line);
  border-radius: var(--es-radius-xl);
  box-shadow: var(--es-shadow);
}

.example { margin: 12px 2px 0; color: var(--es-muted); font-size: 13px; }

.search-notice {
  margin: 12px 2px 0;
  color: var(--es-green-dark);
  font-size: 13px;
  font-weight: 700;
}

/* --- results ------------------------------------------------------------------ */

.results { display: grid; gap: 14px; padding-top: 40px; }
.results:empty { padding-top: 0; }

.funder {
  padding: 28px;
  background: var(--es-surface);
  border: 1px solid var(--es-line);
  border-radius: var(--es-radius-xl);
  box-shadow: 0 8px 25px #17221f0d;
}

.funder h2 { margin: 6px 0 10px; font-size: 25px; letter-spacing: -.035em; }
.funder p { margin: 0 0 10px; color: var(--es-muted); line-height: 1.6; }
.funder strong { color: var(--es-ink); }
/* The colour is restated because .eyebrow is a <p>, so `.funder p` above outranks the
   bare `.eyebrow` rule on specificity and would render the award count muted. */
.funder .eyebrow { color: var(--es-green-dark); font-size: 12px; letter-spacing: .04em; text-transform: none; }
.funder .es-button { margin-top: 8px; }

.empty {
  padding: 56px 28px;
  text-align: center;
  background: var(--es-surface);
  border: 1px dashed var(--es-line-strong);
  border-radius: var(--es-radius-xl);
}

.empty h2 { margin: 0 0 8px; font-size: 22px; letter-spacing: -.035em; }
.empty p { margin: 0; color: var(--es-muted); }

/* --- how it works ------------------------------------------------------------- */

.steps { padding-top: 72px; }
.steps > h2 { margin: 18px 0 34px; max-width: 620px; font-size: clamp(30px, 4vw, 46px); line-height: 1.02; letter-spacing: -.05em; }
.steps > div { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 14px; }

.steps article {
  padding: 26px;
  background: var(--es-surface);
  border: 1px solid var(--es-line);
  border-radius: var(--es-radius-xl);
}

.steps article > span {
  display: grid;
  place-items: center;
  width: 32px;
  height: 32px;
  margin-bottom: 14px;
  background: var(--es-green-soft);
  color: var(--es-green-dark);
  border-radius: var(--es-radius-sm);
  font-size: 12px;
  font-weight: 800;
}

.steps h3 { margin: 0 0 8px; font-size: 18px; letter-spacing: -.03em; }
.steps p { margin: 0; color: var(--es-muted); line-height: 1.6; }

/* --- pricing ------------------------------------------------------------------ */

.pricing {
  display: grid;
  grid-template-columns: 1.4fr 1fr;
  gap: 14px;
  align-items: stretch;
  padding-top: 72px;
}

.pricing > div, .pricing aside {
  padding: 36px;
  border-radius: var(--es-radius-xl);
}

.pricing > div { background: var(--es-surface); border: 1px solid var(--es-line); }
.pricing h2 { margin: 14px 0 10px; font-size: clamp(38px, 5vw, 56px); letter-spacing: -.055em; }
.pricing h2 small { font-size: 16px; font-weight: 700; color: var(--es-muted); letter-spacing: -.01em; }
.pricing > div > p { margin: 0 0 20px; color: var(--es-muted); line-height: 1.6; max-width: 46ch; }

.pricing aside { background: var(--es-green-soft); }
.pricing aside strong { display: block; margin-bottom: 8px; font-size: 15px; }
.pricing aside p { margin: 0; color: var(--es-ink-soft, var(--es-ink)); line-height: 1.6; }

/* --- footer ------------------------------------------------------------------- */

footer {
  padding: 34px clamp(22px, 4vw, 68px);
  background: var(--es-ink);
  color: #cfdad5;
}

footer strong { display: block; margin-bottom: 6px; color: var(--es-surface); font-size: 15px; }
footer p { margin: 0; font-size: 13px; line-height: 1.6; max-width: 70ch; }

/* --- narrow ------------------------------------------------------------------- */

@media (max-width: 860px) {
  .search { grid-template-columns: 1fr 1fr; }
  .pricing { grid-template-columns: 1fr; }

  /* Jobs hides its whole nav here, which it can afford: its links are a search page and
     the parent site. Funding's nav carries Sign in, and a paying subscriber should not
     lose the way back into their account on a phone. Drop the in-page anchors, which the
     content reaches anyway by scrolling, and keep the destinations. */
  .site-header nav { gap: 16px; }
  .site-header nav a[href^="#"] { display: none; }
}

@media (max-width: 620px) {
  .search { grid-template-columns: 1fr; }
  .hero { padding-top: 52px; }
  .funder, .steps article { padding: 21px; }

  /* At this width the wordmark and two nav links together exceed the viewport, and the
     header is a non-wrapping flex row, so the nav overhangs and the page scrolls
     sideways. Sign in is the one link that has to survive, and it is last in the markup. */
  .site-header { padding-inline: 16px; }
  .brand { font-size: 15px; }
  .site-header nav a:not(:last-child) { display: none; }
  /* The sign-out control is not an anchor, so it survives the rule above. The name does
     not fit alongside the wordmark at this width even truncated, and it is decoration
     rather than function: a button reading "Sign out" already says you are signed in. */
  .signed-in { display: none; }
}