/* JobSeekerFoundry. Colors come from the logo and every pair below was
   contrast checked against WCAG AA. Notes on the rules that matter:
   --ember is 3.61:1 on paper, so it is large display text only, never body.
   --amber and --gold are 2.52:1 on paper, so they are fills only, never text.
   Links use --ember-link at 5.39:1. */

:root {
  --paper:       #FAF7F2;
  --paper-card:  #FFFFFF;
  --ink:         #14161C;
  --ink-muted:   #5A5F68;
  --steel:       #203040;
  --steel-deep:  #101018;
  --steel-light: #304050;
  --steel-mist:  #AEB9C4;
  --ember:       #F04000;
  --ember-link:  #B83A00;
  --ember-hover: #8F2C00;
  --amber:       #F08000;
  --amber-hover: #D96E00;
  --gold:        #F09000;
  --white-hot:   #F7F5F2;
  --rule:        #D8D2C8;

  --measure: 68ch;
  --font-display: "Archivo", "Helvetica Neue", Arial, sans-serif;
  --font-body: "IBM Plex Sans", "Segoe UI", system-ui, sans-serif;
}

@font-face {
  font-family: "Archivo";
  src: url("/fonts/archivo-variable.woff2") format("woff2");
  font-weight: 100 900;
  font-display: swap;
}
@font-face {
  /* Google serves Plex as one variable file now, so a single face covers
     every weight the site uses. Latin subset. */
  font-family: "IBM Plex Sans";
  src: url("/fonts/ibm-plex-sans-variable.woff2") format("woff2");
  font-weight: 100 900;
  font-display: swap;
}

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

body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font-family: var(--font-body);
  font-size: 1.0625rem;
  line-height: 1.6;
  -webkit-text-size-adjust: 100%;
}

h1, h2, h3 {
  font-family: var(--font-display);
  font-weight: 900;
  line-height: 1.1;
  letter-spacing: -0.01em;
}

/* Every page headline is all caps at the same 2rem cap as the homepage.
   Long titles may wrap on narrow screens rather than shrink further. */
h1 {
  font-size: clamp(1.4rem, 4.75vw, 2rem);
  text-transform: uppercase;
  margin: 0 0 0.4em;
}

/* The homepage headline (the one under the eyebrow) may scale further
   down, because it must always hold a single line. */
.page-eyebrow + h1 {
  font-size: clamp(0.9rem, 4.75vw, 2rem);
  white-space: nowrap;
}

a { color: var(--ember-link); }
a:hover { color: var(--ember-hover); }

:focus-visible {
  outline: 3px solid var(--ember-link);
  outline-offset: 2px;
}

.skip-link {
  position: absolute;
  left: -9999px;
  background: var(--steel-deep);
  color: var(--white-hot);
  padding: 0.75rem 1rem;
}
.skip-link:focus {
  left: 0;
  top: 0;
  z-index: 10;
}

/* The header is white. The logo is the horizontal lockup on a transparent
   background, so it sits directly on the white bar. */
.site-header {
  background: #FFFFFF;
  color: var(--ink);
  padding: 1rem 1.25rem;
  border-bottom: 4px solid var(--ember);
}
/* Bands run full-bleed; their contents align to the same centered column
   as the page content (the Nexxt pattern, adopted 2026-09-02). */
.band { max-width: 60rem; margin: 0 auto; }
.brand { display: inline-block; max-width: 100%; }
.brand-logo {
  display: block;
  height: auto;
  width: auto;
  max-height: 120px;
  max-width: 100%;   /* the 3:1 lockup must shrink on narrow screens */
}
.tagline {
  margin: 0.5rem 0 0;
  color: var(--ember-link);    /* 5.39:1 on white, passes AA */
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 1.05rem;
  letter-spacing: 0.01em;
}

/* Navigation lives behind a hamburger toggle. details/summary keeps it
   working with JavaScript off. */

/* The menu and search stay reachable while reading (owner decision after
   a hallway test, 2026-09-03). On phones the logo band scrolls away and
   the dark bar locks to the top; on desktop the whole header locks. The
   wrapper is display:contents on phones so the bar's sticky range is the
   whole page rather than the wrapper's own box. */
.site-top { display: contents; }
.site-nav {
  background: var(--steel-light);
  padding: 0.5rem 1.25rem;
  /* sticky both locks the bar and, like relative, anchors the open menu
     panel, which spans this bar's full width. */
  position: sticky;
  top: 0;
  z-index: 20;
}
.nav-toggle {
  display: inline-block;
  cursor: pointer;
  list-style: none;
  color: var(--white-hot);      /* 12.38:1 on steel */
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 0.95rem;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  padding: 0.4rem 0.2rem;
}
.nav-toggle::-webkit-details-marker { display: none; }
.nav-toggle-label { margin-left: 0.35rem; }
/* The bars glyph draws smaller than the label's capitals at the same
   font-size. 1.36em makes its ink exactly cap height, and the small
   raise puts its top bar on the cap line and its bottom on the baseline
   (measured from the rendered font's actual ink metrics). */
.nav-burger {
  font-size: 1.36em;
  line-height: 1;
  display: inline-block;
  vertical-align: 0.02em;
}

/* Phones drop the word and enlarge the glyph; the icon alone reads as
   Menu on mobile, and the freed space goes to the search field. */
@media (max-width: 640px) {
  /* Menu links grow to a finger-sized target on phones. */
  .site-nav .nav-panel a { padding: 0.55rem 0; }
  .nav-toggle-label { display: none; }
  .nav-burger { font-size: 1.6rem; line-height: 1; }
  /* Icon-only toggles still need a finger-sized target. */
  .nav-toggle { padding: 0.5rem 0.9rem 0.5rem 0.2rem; }
}
.nav-toggle:hover { color: var(--gold); }
/* The open menu drops below the bar as a full-width layer instead of
   sharing the bar's flex row, so opening it never squeezes the search
   box. The side padding centers the content on the 60rem band once the
   viewport is wider than it. */
.nav-panel {
  position: absolute;
  left: 0;
  right: 0;
  top: 100%;
  z-index: 40;
  background: var(--steel-light);
  box-shadow: 0 10px 18px rgba(0, 0, 0, 0.3);
  /* The bar is stuck, so a menu taller than the screen must scroll
     inside itself; page scrolling can no longer reveal its bottom.
     61px is the stuck bar's height; dvh tracks the phone URL bar. */
  max-height: calc(100vh - 61px);
  max-height: calc(100dvh - 61px);
  overflow-y: auto;
  overscroll-behavior: contain;
  padding: 0.75rem max(1.25rem, calc((100% - 60rem) / 2)) 1.25rem;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 0.9rem;
}
.nav-home {
  font-weight: 600;
}
.nav-heading {
  /* Smaller than the links to keep label-vs-action hierarchy, but close
     enough in size and brightness to carry the menu's column scanning. */
  font-size: 0.85rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: #C2CBD4;               /* 6.47:1 on steel-light; gold is reserved
                                   for the current-page link */
  margin: 0 0 0.35rem;
}
.site-nav ul { list-style: none; margin: 0; padding: 0; }
.nav-section ul { padding-left: 1rem; }  /* links sit slightly indented under their heading */
.site-nav a {
  color: var(--white-hot);      /* 12.38:1 on steel */
  text-decoration: none;
  display: block;
  padding: 0.15rem 0;
}
.site-nav a:hover { text-decoration: underline; }
.site-nav a[aria-current="page"] {
  color: var(--gold);
  font-weight: 600;
}

main { padding: 2.5rem 1.25rem 4rem; }
.page { max-width: var(--measure); margin: 0 auto; }
.page-summary { margin-top: 0; }
.page-intro { margin-bottom: 2rem; }

/* The site's button: a solid ember block in the display font, all caps.
   Put class="button" on any link that should read as a primary action. */
.button {
  display: inline-block;
  background: var(--amber);
  color: var(--ink);            /* 6.71:1; orange means act, ember means go */
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 0.95rem;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  text-decoration: none;
  padding: 0.6rem 1rem;
  border: 0;
  border-radius: 2px;
  cursor: pointer;
}
.button:hover { background: var(--amber-hover); color: var(--ink); }  /* 5.32:1 */

/* One call-to-action button after a page's intro. */
.page-cta { margin: -0.5rem 0 2rem; }
.cta-or {
  display: block;
  margin-top: 2.5rem;
  font-family: var(--font-display);
  font-weight: 700;
  text-transform: uppercase;
  font-size: 1.1rem;
  letter-spacing: 0.05em;
  color: var(--ink-muted);
}

.resource-group { margin: 2.5rem 0; }
.group-heading {
  font-size: 1.5rem;
  text-transform: uppercase;
  padding-bottom: 0.4rem;
  border-bottom: 2px solid var(--ember-link);
  margin-bottom: 1rem;
}

.resource-list { list-style: none; margin: 0; padding: 0; }
.resource {
  background: var(--paper-card);
  border: 1px solid var(--rule);
  border-left: 4px solid var(--ember-link);
  padding: 1rem 1.1rem;
  margin-bottom: 0.9rem;
}
.resource[hidden] { display: none; }
.resource-name { font-size: 1.15rem; margin: 0 0 0.3rem; font-weight: 700; }
.resource-blurb { margin: 0 0 0.5rem; }
.resource-note {
  margin: 0 0 0.5rem;
  color: var(--ink-muted);
  font-size: 0.9rem;
}
.resource-meta {
  margin: 0;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.5rem;
}

/* Badges are dark ink on a fill, or white on a dark fill. Never amber text. */
.badge {
  font-size: 0.72rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  padding: 0.18rem 0.5rem;
  border-radius: 2px;
  white-space: nowrap;
}
.badge-cost-free      { background: var(--amber); color: var(--ink); }   /* 6.71:1 */
.badge-cost-free-tier { background: var(--gold);  color: var(--ink); }   /* 7.49:1 */
.badge-cost-low-cost  { background: var(--paper); color: var(--ink); border: 1px solid var(--ember-link); }
.badge-type-nonprofit,
.badge-type-government,
.badge-type-tool,
.badge-type-training,
.badge-type-community,
.badge-type-recruiter,
.badge-type-events {
  background: var(--steel);
  color: var(--white-hot);      /* 12.38:1 */
}
.verified { font-size: 0.8rem; color: var(--ink-muted); }

.filters-label {
  font-size: 0.75rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--ink-muted);
  margin: 0 0 0.5rem;
}
.filter-controls { display: flex; flex-direction: column; gap: 0.9rem; }
.filter-group { border: 0; padding: 0; margin: 0; }
.filter-heading {
  font-size: 0.75rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--ink-muted);
  padding: 0;
  margin: 0 0 0.4rem;
}
.filter-buttons { display: flex; flex-wrap: wrap; gap: 0.5rem; }
.filter-button {
  font: inherit;
  font-size: 0.85rem;
  background: var(--paper-card);
  color: var(--ink);
  border: 1px solid var(--ember-link);
  padding: 0.3rem 0.7rem;
  cursor: pointer;
}
.filter-button[aria-pressed="true"] {
  background: var(--ember-link);
  color: #FFFFFF;               /* 5.76:1 */
}
.filter-empty { color: var(--ink-muted); font-style: italic; }

/* Filters and the jump-to-section row collapse behind disclosure toggles. */
.filters-toggle {
  display: inline-block;
  cursor: pointer;
  list-style: none;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 0.85rem;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--ember-link);
  padding: 0.3rem 0;
}
.filters-toggle::-webkit-details-marker { display: none; }
.filters-toggle::before { content: "\25B8\00a0"; }
details[open] > .filters-toggle::before { content: "\25BE\00a0"; }
.filters { margin: 1.5rem 0 0.5rem; }
.jump-nav { margin: 1rem 0 0.5rem; }
.jump-links {
  display: flex;
  flex-wrap: wrap;
  gap: 0.4rem;
  padding: 0.5rem 0 0.25rem;
}
.jump-links a {
  font-size: 0.85rem;
  text-decoration: none;
  border: 1px solid var(--rule);
  background: var(--paper-card);
  border-radius: 2px;
  padding: 0.25rem 0.55rem;
}
.jump-links a:hover { border-color: var(--ember-link); }

/* Show more, under the listings. */
.show-more-wrap { margin: 1.5rem 0 0; }


/* Desktop: the content column widens to 960px (mobile keeps the reading
   measure), and each listing puts its badges on the title line with the
   text running the full width below. */
/* Tablets get the same three menu columns as desktop, just tighter, so
   the panel is not one narrow strip beside empty space; phones keep the
   single stack. */
@media (min-width: 768px) and (max-width: 1023px) {
  .nav-panel {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 1.25rem 1.25rem;
    align-items: start;
  }
  .nav-home { grid-column: 1 / -1; }
}

@media (min-width: 1024px) {
  /* The open menu lays its groups out as columns; phones keep the stack. */
  .nav-panel {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 1.25rem 2rem;
    align-items: start;
  }
  .nav-home { grid-column: 1 / -1; }

  .page { max-width: 60rem; }
  .resource {
    display: grid;
    grid-template-columns: 1fr auto;
    column-gap: 1.25rem;
    align-items: baseline;
  }
  .resource-name { grid-column: 1; grid-row: 1; }
  .resource-meta { grid-column: 2; grid-row: 1; }
  .resource-blurb,
  .resource-note { grid-column: 1 / -1; }
}

/* Interior pages compact the header on phones; the homepage keeps the
   full brand moment. */
@media (max-width: 640px) {
  body:not(.home) .tagline { display: none; }
  body:not(.home) .brand-logo { max-height: 64px; }
  body:not(.home) .site-header { padding: 0.7rem 1.25rem; }
}
.filter-count {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 0.85rem;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--ink-muted);
  margin: 0.75rem 0 0;
}

/* The nav strip holds the menu toggle on the left and the persistent
   search box on the right. The panel opens below, full width. */
.nav-bar {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 1rem;
}
.nav-menu { flex: 1 1 auto; min-width: 0; }
.nav-search {
  position: relative;
  display: flex;
  gap: 0.5rem;
  flex: 0 1 22rem;
  min-width: 9rem;
  margin-top: 0.15rem;
}
.nav-search input {
  font: inherit;
  flex: 1;
  min-width: 0;
  padding: 0.4rem 0.6rem;
  border: 1px solid var(--steel-mist);
  border-radius: 2px;
  background: var(--white-hot);
  color: var(--ink);
}
/* The nav GO button is a .button with tighter padding for the slim bar. */
.nav-search-go { padding: 0.4rem 0.9rem; }

/* Autocomplete suggestions, dropped below whichever search box is typing. */
.ac-list {
  position: absolute;
  top: 100%;
  left: 0;
  right: 0;
  z-index: 20;
  margin: 0.25rem 0 0;
  padding: 0;
  list-style: none;
  background: var(--paper-card);
  border: 1px solid var(--ember-link);
  border-radius: 2px;
  box-shadow: 0 4px 14px rgba(16, 16, 24, 0.25);
  max-height: 20rem;
  overflow-y: auto;
}
.ac-option {
  padding: 0.5rem 0.7rem;
  cursor: pointer;
  border-bottom: 1px solid var(--rule);
}
.ac-option:last-child { border-bottom: 0; }
.ac-option:hover, .ac-option.ac-active { background: var(--paper); }
.ac-name {
  display: block;
  font-weight: 600;
  color: var(--ink);
}
.ac-page {
  display: block;
  font-size: 0.8rem;
  color: var(--ink-muted);
}
.ac-see-all {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 0.85rem;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--ember-link);
}



/* The search page's own input runs wider than the menu box. */
.search-form { margin: 0 0 1.5rem; position: relative; }
.search-hint {
  font-size: 0.9rem;
  color: var(--ink-muted);
  margin: 0.5rem 0 0;
}
.search-form input {
  font: inherit;
  width: 100%;
  padding: 0.55rem 0.75rem;
  border: 1px solid var(--ember-link);
  border-radius: 2px;
  background: var(--paper-card);
  color: var(--ink);
  margin-top: 0.4rem;
}

/* Back-to-top on long pages, injected by nav.js. */
.back-to-top {
  position: fixed;
  right: 1rem;
  bottom: 1rem;
  z-index: 5;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 0.85rem;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  border: 0;
  border-radius: 2px;
  background: var(--steel);
  color: var(--white-hot);      /* 12.38:1 */
  padding: 0.6rem 0.9rem;
  cursor: pointer;
  box-shadow: 0 2px 8px rgba(16, 16, 24, 0.35);
}
.back-to-top:hover { background: var(--steel-light); }

.site-footer {
  background: var(--steel-deep);
  color: var(--white-hot);      /* 17.40:1 */
  padding: 2rem 1.25rem;
  font-size: 0.9rem;
}
.site-footer a { color: var(--gold); }
/* Footer text hangs on the same centered column as the rest of the page. */
.site-footer p { max-width: 60rem; margin: 0 auto 0.5rem; }

.donate-block {
  max-width: var(--measure);
  margin: 3rem auto 0;
  padding: 1.25rem;
  border: 1px solid var(--rule);
  background: var(--paper-card);
}
.donate-block p { margin: 0 0 0.75rem; }

/* The checklist's phase jump row: filter-style pills stuck to the top of
   the viewport, because the page runs long. One line always; on narrow
   screens the row scrolls sideways instead of stacking. */
.checklist-jump {
  position: sticky;
  /* Sits just below the stuck nav bar (61px tall on phones; the desktop
     override below matches the full stuck header). Re-measure if the
     header's size ever changes. */
  top: 61px;
  z-index: 5;
  display: flex;
  flex-wrap: nowrap;
  overflow-x: auto;
  gap: 0.5rem;
  background: var(--paper);
  padding: 0.6rem 0;
  border-bottom: 1px solid var(--rule);
  margin: 0 0 1.5rem;
  scrollbar-width: none;
}
.checklist-jump::-webkit-scrollbar { display: none; }
.checklist-jump a {
  flex: 0 0 auto;
  font-size: 0.85rem;
  background: var(--paper-card);
  color: var(--ink);
  border: 1px solid var(--ember-link);
  padding: 0.3rem 0.7rem;
  text-decoration: none;
}
.checklist-jump a:hover { background: var(--ember-link); color: #FFFFFF; }

/* Anchored headings land below the stuck bar (plus, on the checklist,
   its sticky pill row), and jumps glide for those who have not turned
   motion off. The skip link's target gets the same courtesy. */
main h2[id], #main { scroll-margin-top: 5rem; }
.page-quick-start-checklist main h2[id] { scroll-margin-top: 8rem; }
@media (min-width: 900px) {
  .checklist-jump { top: 216px; }
  main h2[id], #main { scroll-margin-top: 15rem; }
  .page-quick-start-checklist main h2[id] { scroll-margin-top: 17.5rem; }
}
@media (prefers-reduced-motion: no-preference) {
  html { scroll-behavior: smooth; }
}

/* The checklist's closing ask gets the loud treatment: a dark forge panel
   under an ember edge, with the site button. The homepage block stays quiet. */
.donate-block-forge {
  background: var(--steel-deep);
  border: none;
  border-top: 4px solid var(--ember);
  color: var(--white-hot);
  padding: 1.75rem 1.5rem;
}
.donate-block-forge p {
  font-size: 1.125rem;
  margin: 0 0 1.1rem;
}

@media (min-width: 900px) {
  .site-header .band {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 2rem;
  }
  .tagline { margin: 0; }
  .nav-bar { max-width: 60rem; margin: 0 auto; }
  /* Desktop locks the whole header, logo and all. The wrapper becomes a
     real sticky box and the bar inside no longer needs its own offset. */
  .site-top {
    display: block;
    position: sticky;
    top: 0;
    z-index: 20;
  }
  .site-nav { position: relative; top: auto; }
}

/* The About page signature. */
.signoff {
  margin-top: 2rem;
  font-style: italic;
}

/* The hero eyebrow: a small ember line that sets up a short display H1. */
.page-eyebrow {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 0.85rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--ember-link);
  margin: 0 0 0.5rem;
}

/* The router band: dark steel cards on paper, echoing the header and
   footer bracket. Each card is one need a visitor recognizes. */
.router { margin: 2.5rem 0 1rem; }
.router-cards {
  display: grid;
  /* 240px minimum keeps six cards flowing as two balanced rows of three
     on the 960px band instead of an uneven four-plus-two. */
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: 1rem;
}
.router-card {
  position: relative;
  display: block;
  background: var(--steel);
  color: var(--white-hot);
  text-decoration: none;
  padding: 1.3rem 1.2rem 2.4rem;
  border-bottom: 4px solid var(--steel-light);
  transition: transform 0.15s ease, border-color 0.15s ease;
}
.router-card:hover,
.router-card:focus-visible {
  color: var(--white-hot);
  border-bottom-color: var(--ember);
  transform: translateY(-3px);
}
.router-card h3 {
  font-size: 1.2rem;
  margin: 0 0 0.45rem;
  color: var(--white-hot);
}
.router-card p {
  margin: 0;
  font-size: 0.95rem;
  color: var(--paper);           /* 16.9:1 on steel */
}
.router-go {
  position: absolute;
  right: 1.1rem;
  bottom: 0.8rem;
  color: var(--gold);            /* 5.58:1 on steel */
  font-size: 1.3rem;
  font-weight: 600;
}

@media (prefers-reduced-motion: reduce) {
  .router-card { transition: none; }
  .router-card:hover, .router-card:focus-visible { transform: none; }
}

/* A short explanation under a group heading, for sections that need one. */
.group-note {
  margin: 0 0 1rem;
}

/* Large filter groups render as one select instead of a button wall. */
.filter-select {
  font: inherit;
  font-size: 0.9rem;
  color: var(--ink);
  background: var(--paper-card);
  border: 1px solid var(--ember-link);
  max-width: 100%;   /* a long option must not widen the page on phones */
  padding: 0.35rem 0.6rem;
  max-width: 100%;
}