/* ============================================================================
   resources.css -- GigFinder Hiring Resource Center (/resources/)

   Loaded ONLY by /resources/index.asp, via the `extraHead` hook in
   includes/header.asp. Every selector is scoped .res-* so nothing here can
   reach the rest of the public site.

   The hero reuses the shared .brand-bg wrapper rather than re-declaring the
   dark backdrop stack. That stack (0.37 black + flat 0.69 navy + image) is
   duplicated in four places already and drifts whenever a fifth copy appears,
   so this page deliberately adds no sixth.
   ========================================================================= */

/* Light reading surface under the dark hero. The topic grids are dense and
   text-heavy; they sit on white rather than on the backdrop. */
.res-body { background: #fff; }

/* --- Hero ---------------------------------------------------------------- */
.res-hero h1 { margin-bottom: 14px; }

/* Qualified with the element so it can beat `.brand-bg .page-hero p` in
   styles.css, which pins hero paragraphs to 540px and would otherwise win on
   specificity (0,2,1) against a bare class (0,1,0). This selector ties at
   (0,2,1) and takes it on source order, since extraHead injects this file
   after the main stylesheet. */
.res-hero p.res-hero-sub {
  max-width: 720px;
  margin: 0 auto 28px;
  font-size: 1.08rem;
  line-height: 1.6;
  color: rgba(255,255,255,.88);
}

/* Visually-hidden label for the search field. Named .res-sr-only rather than
   the conventional .sr-only: styles.css has no such utility, and claiming that
   generic name from a page-scoped stylesheet would silently shadow a future
   site-wide one. */
.res-sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
}

.res-search {
  max-width: 560px;
  margin: 0 auto;
  position: relative;
}

.res-search input {
  width: 100%;
  padding: 15px 18px 15px 46px;
  border-radius: 999px;
  border: 1px solid rgba(255,255,255,.55);
  background: rgba(255,255,255,.96);
  font-size: 1rem;
  font-family: inherit;
  color: var(--text-dark);
}

.res-search input:focus {
  outline: none;
  border-color: #fff;
  box-shadow: 0 0 0 4px rgba(37,99,235,.35);
}

/* Magnifier sits inside the field. pointer-events:none so a click anywhere in
   the pill still lands on the input. */
.res-search-icon {
  position: absolute;
  left: 17px;
  top: 50%;
  transform: translateY(-50%);
  width: 18px;
  height: 18px;
  color: var(--text-muted);
  pointer-events: none;
}

.res-search-count {
  margin-top: 12px;
  font-size: .9rem;
  color: rgba(255,255,255,.85);
  min-height: 1.2em;
}

/* --- Section shell -------------------------------------------------------- */
.res-section { padding: 64px 0; border-top: 1px solid var(--border); }
.res-section:first-child { border-top: 0; }

.res-section-head { margin-bottom: 32px; }

.res-eyebrow {
  display: inline-block;
  background: var(--primary-light);
  color: var(--primary);
  padding: 4px 14px;
  border-radius: 999px;
  font-size: .8rem;
  font-weight: 600;
  letter-spacing: .04em;
  text-transform: uppercase;
  margin-bottom: 12px;
}

.res-section-head h2 { font-size: 1.9rem; margin-bottom: 10px; }
.res-section-sub { color: var(--text-mid); max-width: 720px; }

/* --- Section 1: four large audience cards --------------------------------- */
.res-feature-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
  gap: 22px;
}

.res-feature {
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: 28px 26px;
  border-radius: var(--radius);
  border: 1px solid var(--border);
  background: linear-gradient(180deg, #F8FAFF 0%, #fff 60%);
  transition: var(--transition);
}

.res-feature:hover {
  border-color: #BFDBFE;
  box-shadow: 0 12px 28px rgba(17,24,39,.10);
  transform: translateY(-2px);
}

.res-feature-eyebrow {
  font-size: .74rem;
  font-weight: 700;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--accent);
}

.res-feature-title { font-size: 1.25rem; font-weight: 700; color: var(--text-dark); }
.res-feature-blurb { font-size: .95rem; line-height: 1.55; color: var(--text-mid); flex: 1 1 auto; }

.res-feature-cta {
  margin-top: 6px;
  font-size: .92rem;
  font-weight: 600;
  color: var(--primary);
}

/* The arrow is CSS, not a character in the ASP array -- the same strings feed
   nothing else here, but keeping glyphs out of the content arrays means the
   labels stay clean if they are ever reused in JSON-LD the way faq_inc does. */
.res-feature-cta::after { content: " \2192"; }

/* --- Section 2: browse-by-category columns -------------------------------- */
.res-cat-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 32px;
}

.res-cat-title {
  font-size: 1.02rem;
  font-weight: 700;
  color: var(--text-dark);
  padding-bottom: 10px;
  margin-bottom: 12px;
  border-bottom: 2px solid var(--primary-light);
}

.res-cat-list { list-style: none; margin: 0; padding: 0; }
.res-cat-list li { margin-bottom: 9px; font-size: .94rem; line-height: 1.4; }

.res-cat-list a { color: var(--text-mid); transition: var(--transition); }
.res-cat-list a:hover { color: var(--primary); text-decoration: underline; }

/* --- Sections 3 to 6 and 8: topic cards ----------------------------------- */
.res-card-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(230px, 1fr));
  gap: 16px;
}

/* BUILT vs NOT BUILT is the primary signal on this page, so it is carried by
   the card surface itself rather than by the "Soon" tag alone: a reader scanning
   a grid of thirty topics should be able to see what exists without reading a
   single label.

   Green for built, grey for pending. Very light on purpose -- these grids run to
   fifteen cards in a row and a saturated fill would turn the section into a wall
   of colour. The tint only has to survive being seen next to its grey neighbour.

   The base rule is the BUILT state because a built card is the goal state, and
   `.res-card.is-soon` below overrides it at (0,2,0) against (0,1,0), so it wins
   on specificity rather than on source order. */
.res-card {
  display: flex;
  flex-direction: column;
  gap: 6px;
  padding: 18px 20px;
  border-radius: var(--radius-sm);
  border: 1px solid #CDE9D8;
  background: #F4FBF6;
  transition: var(--transition);
}

.res-card:hover {
  border-color: #86CFA6;
  background: #EAF7EF;
  transform: translateY(-2px);
}

.res-card-title { font-weight: 600; font-size: .98rem; color: var(--text-dark); line-height: 1.35; }
.res-card-blurb { font-size: .87rem; line-height: 1.5; color: var(--text-muted); }

/* --- Section 7: comparison cards ------------------------------------------ */
.res-cmp-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
  gap: 18px;
}

.res-cmp {
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: 22px 24px;
  border-radius: var(--radius);
  border: 1px solid #E5E7EB;
  background: linear-gradient(135deg, #0F172A 0%, #1E3A8A 100%);
  color: #fff;
  transition: var(--transition);
}

/* The flagship comparison spans the full row on wide viewports. Guarded by a
   min-width query: at one column per row, `span 2` would overflow the grid. */
@media (min-width: 900px) {
  .res-cmp--lead { grid-column: span 2; }
}

.res-cmp:hover { box-shadow: 0 14px 32px rgba(15,23,42,.28); transform: translateY(-2px); }

.res-cmp-vs {
  font-size: .72rem;
  font-weight: 700;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: #93C5FD;
}

.res-cmp-title { font-size: 1.18rem; font-weight: 700; color: #fff; }
.res-cmp-blurb { font-size: .9rem; line-height: 1.55; color: rgba(255,255,255,.82); }

/* Pending comparisons drop the dark gradient entirely. Left at reduced opacity
   they still read as a designed, finished card, which is exactly the impression
   a page that does not exist should not give. */
.res-cmp.is-soon {
  background: #F5F5F5;
  border: 1px dashed #DDDDDD;
  color: var(--text-mid);
}
.res-cmp.is-soon:hover { box-shadow: none; transform: none; }
.res-cmp.is-soon .res-cmp-vs { color: var(--text-muted); }
.res-cmp.is-soon .res-cmp-title { color: var(--text-mid); }
.res-cmp.is-soon .res-cmp-blurb { color: var(--text-muted); }
.res-cmp.is-soon .res-soon { background: #EAEAEA; color: var(--text-muted); }

/* --- Learning paths -------------------------------------------------------- */
.res-path-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 24px;
}

.res-path {
  padding: 26px 26px 22px;
  border-radius: var(--radius);
  border: 1px solid var(--border);
  background: #F8FAFF;
}

.res-path-title { font-size: 1.1rem; font-weight: 700; color: var(--text-dark); margin-bottom: 6px; }
.res-path-blurb { font-size: .9rem; color: var(--text-muted); margin-bottom: 16px; }

/* Counter-based numbering rather than the list's own markers: the steps need a
   coloured pill, and ::marker cannot be given a background. */
.res-path-steps { list-style: none; margin: 0; padding: 0; counter-reset: respath; }

.res-path-steps li {
  counter-increment: respath;
  position: relative;
  padding-left: 34px;
  margin-bottom: 12px;
  font-size: .94rem;
  line-height: 1.45;
}

.res-path-steps li::before {
  content: counter(respath);
  position: absolute;
  left: 0;
  top: -1px;
  width: 22px;
  height: 22px;
  border-radius: 50%;
  background: var(--primary);
  color: #fff;
  font-size: .76rem;
  font-weight: 700;
  display: flex;
  align-items: center;
  justify-content: center;
}

.res-path-steps a { color: var(--text-mid); }
.res-path-steps a:hover { color: var(--primary); text-decoration: underline; }

/* --- Pending topics -------------------------------------------------------- */
/* Rendered by resources_inc.asp as a <div>/<span> with no href, so these are
   genuinely inert: nothing to click, nothing for a crawler to queue. Styling
   only has to say so. */
/* Pending: grey, dashed, inert. Dashed as well as grey so the state survives
   for anyone who cannot separate the two hues, and because the card genuinely is
   an outline of something rather than a thing. */
.res-card.is-soon,
.res-feature.is-soon {
  background: #F5F5F5;
  border-color: #DDDDDD;
  border-style: dashed;
  cursor: default;
}

.res-card.is-soon:hover,
.res-feature.is-soon:hover {
  transform: none;
  box-shadow: none;
  border-color: #DDDDDD;
  background: #F5F5F5;
}

.res-card.is-soon .res-card-title { color: var(--text-mid); }

.res-soon {
  align-self: flex-start;
  margin-top: 4px;
  padding: 2px 8px;
  border-radius: 999px;
  background: #F3F4F6;
  color: var(--text-muted);
  font-size: .68rem;
  font-weight: 700;
  letter-spacing: .06em;
  text-transform: uppercase;
}

.res-cat-soon { color: var(--text-muted); cursor: default; }

/* --- Search filtering ------------------------------------------------------ */
/* The script sets these; nothing is hidden without JS, so the full page is in
   the served HTML for crawlers and for anyone with scripting off. */
.res-hidden { display: none !important; }

.res-empty {
  display: none;
  padding: 48px 0;
  text-align: center;
  color: var(--text-muted);
}

.res-empty.is-on { display: block; }

@media (max-width: 768px) {
  .res-section { padding: 44px 0; }
  .res-section-head h2 { font-size: 1.5rem; }
  .res-card-grid,
  .res-cmp-grid { grid-template-columns: repeat(auto-fill, minmax(180px, 1fr)); }
}

/* ============================================================================
   LEAF PAGES -- guides, industry pages and comparisons (.rp-*)

   Rendered by /includes/resource_page_inc.asp. Kept in THIS file rather than a
   second stylesheet: a leaf page already loads resources.css for the shared
   hero treatment, and a second request per guide buys nothing when the whole
   block is a few kB.
   ========================================================================= */

.rp-body { background: #fff; }

/* One measured column. Long-form prose past ~72 characters per line is harder
   to track back to the start of the next line, and these pages are read, not
   scanned like the hub. */
.rp-col { max-width: 820px; }

.rp-hero-tag {
  display: inline-block;
  padding: 4px 14px;
  border-radius: 999px;
  background: rgba(255,255,255,.16);
  border: 1px solid rgba(255,255,255,.32);
  color: #fff;
  font-size: .78rem;
  font-weight: 700;
  letter-spacing: .06em;
  text-transform: uppercase;
  margin-bottom: 14px;
}

/* Same specificity trick as .res-hero-sub: `.brand-bg .page-hero p` pins hero
   paragraphs to 540px and would win against a bare class. */
.rp-hero p.rp-hero-sub {
  max-width: 700px;
  margin: 0 auto;
  font-size: 1.05rem;
  line-height: 1.6;
  color: rgba(255,255,255,.88);
}

/* --- Breadcrumb ---------------------------------------------------------- */
.rp-crumbs { padding: 22px 0 6px; }
.rp-crumbs ol { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 6px; }
.rp-crumbs li { font-size: .86rem; color: var(--text-muted); }
/* Separator on the pseudo-element rather than a character in the markup, so it
   is never selected when the trail is copied and never read aloud. */
.rp-crumbs li + li::before { content: "/"; margin-right: 6px; color: #D1D5DB; }
.rp-crumbs a { color: var(--text-mid); }
.rp-crumbs a:hover { color: var(--primary); text-decoration: underline; }

/* --- The short answer ---------------------------------------------------- */
/* Deliberately the loudest block on the page. It is the part an answer engine
   lifts whole, and the part a reader in a hurry needs. */
.rp-key {
  margin: 26px 0 30px;
  padding: 24px 26px;
  border-radius: var(--radius);
  border: 1px solid #BFDBFE;
  border-left: 4px solid var(--primary);
  background: #F8FAFF;
}
.rp-key h2 {
  font-size: .82rem;
  font-weight: 800;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--primary);
  margin-bottom: 12px;
}
.rp-key ul { margin: 0; padding-left: 20px; }
.rp-key li { margin-bottom: 10px; line-height: 1.6; color: var(--text-dark); }
.rp-key li:last-child { margin-bottom: 0; }

.rp-reviewed {
  font-size: .86rem;
  color: var(--text-muted);
  margin-bottom: 30px;
}

/* --- Body sections ------------------------------------------------------- */
.rp-section { margin-bottom: 40px; }
.rp-section h2 { font-size: 1.5rem; margin-bottom: 14px; }
.rp-section p { margin-bottom: 14px; line-height: 1.75; color: var(--text-mid); }
.rp-section p:last-child { margin-bottom: 0; }
.rp-section strong { color: var(--text-dark); }
.rp-note { font-size: .88rem; color: var(--text-muted); margin-top: 12px; }

/* --- Comparison table ---------------------------------------------------- */
/* The wrapper scrolls, not the page. A three-column table with real feature
   names is wider than a phone, and a body that scrolls sideways is a far worse
   outcome than a table that does. */
.rp-table-wrap { overflow-x: auto; }

.rp-table {
  width: 100%;
  border-collapse: collapse;
  font-size: .95rem;
  min-width: 480px;
}
.rp-table th,
.rp-table td {
  padding: 12px 14px;
  border-bottom: 1px solid var(--border);
  text-align: left;
  vertical-align: top;
}
.rp-table thead th {
  font-size: .8rem;
  letter-spacing: .05em;
  text-transform: uppercase;
  color: var(--text-muted);
  border-bottom: 2px solid var(--border);
}
.rp-table tbody th { font-weight: 600; color: var(--text-dark); }
/* Our column is tinted the whole way down, header included, so the eye can
   follow it without re-reading the header on every row. */
.rp-table .rp-col-ours { background: #F8FAFF; }
.rp-table thead .rp-col-ours { color: var(--primary); font-weight: 800; }

.rp-yes { color: #16A34A; font-weight: 800; margin-right: 6px; }
.rp-no  { color: #9CA3AF; font-weight: 800; margin-right: 6px; }
/* The word beside the glyph, not instead of it: a table read aloud or printed
   in mono must not depend on a tick to carry the answer. */
.rp-cell-txt { color: var(--text-mid); }

/* --- Verdicts ------------------------------------------------------------ */
.rp-verdict {
  margin-bottom: 26px;
  padding: 24px 26px;
  border-radius: var(--radius);
  border: 1px solid var(--border);
}
.rp-verdict h3 { font-size: 1.18rem; margin-bottom: 16px; }
.rp-verdict-cols {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: 22px;
}
.rp-verdict-col h4 {
  font-size: .78rem;
  font-weight: 800;
  letter-spacing: .07em;
  text-transform: uppercase;
  margin-bottom: 10px;
}
.rp-verdict-col--pro  h4 { color: #15803D; }
.rp-verdict-col--con  h4 { color: #B45309; }
.rp-verdict-col--best h4 { color: var(--primary); }
.rp-verdict-col ul { margin: 0; padding-left: 18px; }
.rp-verdict-col li,
.rp-verdict-col p { font-size: .92rem; line-height: 1.6; color: var(--text-mid); margin-bottom: 8px; }

/* --- Related-links graph ------------------------------------------------- */
.rp-graph {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(230px, 1fr));
  gap: 26px;
  margin: 40px 0;
  padding-top: 30px;
  border-top: 1px solid var(--border);
}
.rp-rel h3 {
  font-size: .82rem;
  font-weight: 800;
  letter-spacing: .07em;
  text-transform: uppercase;
  color: var(--text-muted);
  margin-bottom: 12px;
}
.rp-rel ul { list-style: none; margin: 0; padding: 0; }
.rp-rel li { margin-bottom: 9px; font-size: .93rem; line-height: 1.45; }
.rp-rel a { color: var(--text-mid); }
.rp-rel a:hover { color: var(--primary); text-decoration: underline; }
/* Unbuilt neighbours: inert text, same as the hub's "Soon" items and for the
   same reason. Nothing to click, nothing for a crawler to queue. */
.rp-soon { color: var(--text-muted); cursor: default; }
.rp-rel-blurb { display: block; font-size: .84rem; color: var(--text-muted); }

/* --- Previous / next ----------------------------------------------------- */
.rp-prevnext {
  display: flex;
  gap: 14px;
  flex-wrap: wrap;
  margin: 36px 0 0;
}
.rp-prevnext-a {
  flex: 1 1 220px;
  padding: 16px 18px;
  border-radius: var(--radius-sm);
  border: 1px solid var(--border);
  transition: var(--transition);
}
.rp-prevnext-a:hover { border-color: #BFDBFE; background: #F8FAFF; }
.rp-prevnext-a--next { text-align: right; }
.rp-prevnext-lbl {
  display: block;
  font-size: .74rem;
  font-weight: 700;
  letter-spacing: .07em;
  text-transform: uppercase;
  color: var(--text-muted);
  margin-bottom: 4px;
}
.rp-prevnext-t { display: block; font-weight: 600; color: var(--text-dark); }

/* --- Call to action ------------------------------------------------------ */
.rp-cta {
  margin: 40px 0 56px;
  padding: 32px 30px;
  border-radius: var(--radius);
  background: linear-gradient(135deg, #0F172A 0%, #1E3A8A 100%);
  color: #fff;
  text-align: center;
}
.rp-cta h2 { font-size: 1.4rem; color: #fff; margin-bottom: 10px; }
.rp-cta p { color: rgba(255,255,255,.85); max-width: 560px; margin: 0 auto 20px; }
.rp-cta-btns { display: flex; gap: 12px; justify-content: center; flex-wrap: wrap; }
.rp-cta .btn-outline { border-color: rgba(255,255,255,.55); color: #fff; }
.rp-cta .btn-outline:hover { background: rgba(255,255,255,.12); }

@media (max-width: 768px) {
  .rp-section h2 { font-size: 1.28rem; }
  .rp-key { padding: 20px; }
  .rp-cta { padding: 26px 20px; }
}