/**
 * Brand alignment for the programmatic "authority" pages whose markup ships
 * outside the ACF section builder:
 *
 *   • /interview-questions/ (and the per-stack question banks) — the content
 *     carries a self-contained ".ih" style kit that shipped with a blue accent
 *     (#2E52F0) and a system-ui/monospace type stack. This re-skins it to the
 *     WEWW brand: green accent (--color-secondary-hover, #22c62c) and the
 *     Tomato Grotesk heading/body font.
 *   • /compare-dev-cost/* — the ".weww-compare" cards (styled in
 *     sections/newsletter.css) are on-brand but flat; add green accents so the
 *     key numbers read as WEWW, not generic Bootstrap.
 *
 * Selectors are prefixed with #main so they win against the per-page inline
 * <style> block regardless of source order (the inline kit uses single-class
 * selectors). Kept class-scoped and small; loaded site-wide with the other
 * section CSS in inc/theme-scripts.php.
 */

/* ------------------------------------------------------------------ */
/* /interview-questions/ — re-skin the .ih kit to the brand           */
/* ------------------------------------------------------------------ */

#main .ih {
	/* Accent blue -> brand green; adopt the theme font stack. */
	--w: #22c62c;
	font-family: 'Tomato Grotesk', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
}

/* Stat pill: pale-blue -> pale-green, drop the monospace face. */
#main .ih .stat {
	background: #eafaea;
	border-color: #bfeec0;
	color: #178a1f;
	font-family: 'Tomato Grotesk', system-ui, sans-serif;
}

/* Card hover accent shadow -> green. */
#main .ih .card:hover {
	box-shadow: 0 12px 26px -16px rgba(34, 198, 44, 0.55);
}

/* "Read questions ->" label: keep the accent (now green) but lose monospace. */
#main .ih .card em {
	font-family: 'Tomato Grotesk', system-ui, sans-serif;
	font-weight: 600;
}

/* "Build and score an interview live" banner: navy/blue -> brand dark-green. */
#main .ih .tool {
	background: linear-gradient(120deg, #0b2110, #159a1e);
}

#main .ih .tool .t span {
	color: #cdeccd;
}

/* Banner + CTA buttons -> brand pale-green pill with dark text. */
#main .ih .tool a,
#main .ih .cta a:not(.g) {
	background: #c2ffc2;
	color: #000;
}

#main .ih .cta a.g {
	border-color: rgba(255, 255, 255, 0.45);
}

/* ------------------------------------------------------------------ */
/* Per-stack question banks (/{stack}-developer-interview-questions/) */
/* — the ".iq" kit, same blue/system-ui design as .ih.                */
/* ------------------------------------------------------------------ */

#main .iq {
	--w: #22c62c;
	font-family: 'Tomato Grotesk', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
}

/* Inline code: blue -> neutral green tint. */
#main .iq code {
	background: #eef7ee;
	color: #0f7a17;
}

/* TL;DR callout: blue-tinted gradient -> pale green. */
#main .iq .tldr {
	background: linear-gradient(180deg, #f3fdf3, #eafaea);
}

/* Accent micro-labels: drop the monospace face (now green via --w). */
#main .iq .tldr .lbl,
#main .iq .lvl .yrs {
	font-family: 'Tomato Grotesk', system-ui, sans-serif;
}

/* "Skip the screening" CTA: the filled button was blue+white (var(--w) is
 * now green but green+white is low-contrast) -> brand pale-green pill. */
#main .iq .cta a:not(.g) {
	background: #c2ffc2;
	color: #000;
}

/* ------------------------------------------------------------------ */
/* Competitor comparison hub (/compare/) — the ".wvs" kit             */
/* ------------------------------------------------------------------ */

#main .wvs {
	--w: #22c62c;   /* accent (ghost CTA text/border, table header) -> green */
	--wtint: #eafaea; /* highlighted table column tint -> pale green */
	font-family: 'Tomato Grotesk', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
}

/* Highlighted "us" table column header: green fill needs a darker green
 * than the bright accent so white text stays readable. */
#main .wvs-h2h thead th.us {
	background: #178a1f;
	color: #fff;
}

/* Primary CTA: blue (var(--w) green would be low-contrast on white with
 * white text) -> brand pale-green pill with dark text. */
#main .wvs-cta {
	background: #c2ffc2;
	color: #000;
	box-shadow: 0 6px 18px -8px rgba(34, 198, 44, 0.5);
}

#main .wvs-cta:hover {
	color: #000;
	box-shadow: 0 10px 24px -8px rgba(34, 198, 44, 0.6);
}

/* Ghost CTA already turns green via --w; keep its hover tint on-brand. */
#main .wvs-cta.ghost:hover {
	background: #f3fdf3;
}

/* Card accents were hardcoded blue (not var-driven). */
#main .wvs-card:hover {
	border-color: #22c62c;
	box-shadow: 0 10px 24px -14px rgba(34, 198, 44, 0.6);
}

#main .wvs-card-go {
	color: #159a1e;
	font-family: 'Tomato Grotesk', system-ui, sans-serif;
}

/* ------------------------------------------------------------------ */
/* /compare-dev-cost/* — green accents on the key numbers             */
/* ------------------------------------------------------------------ */

/* Scoped under .weww-compare so the shared .weww-metric / .weww-tools-cta
 * components on case-study and tools pages are left untouched. */

/* Headline metric and the per-region senior rate read in brand green. */
#main .weww-compare .weww-metrics-strip .weww-metric:first-child .weww-metric-value,
#main .weww-compare .weww-compare-region .weww-compare-cost {
	color: #159a1e;
}

/* Thin green top-rule so the metric cards feel WEWW, not generic. */
#main .weww-compare .weww-metrics-strip .weww-metric {
	border-top: 3px solid #22c62c;
}

/* "We hire here" badge in the lead-gen block -> brand green. */
#main .weww-compare .weww-tools-cta .weww-tools-cta-badge {
	background: #eafaea;
	color: #178a1f;
}

/* ============================================================
   Hire hub (/hire-developers/) + Outstaffing stack index
   ============================================================ */
.hire-hub-link{
    border: 1px solid #ececec;
    color: #1f1f1f;
    font-weight: 500;
    line-height: 1.35;
    transition: border-color .15s ease, color .15s ease, background-color .15s ease;
}
.hire-hub-link:hover,
.hire-hub-link:focus-visible{
    border-color: #22C62C;
    color: #22C62C;
    background-color: #f5fdf5;
}
.hire-chip-list .badge{
    /* The theme's base .badge rule forces white text on a transparent bg,
       which beats Bootstrap's bg-light/text-dark utilities here — set both
       explicitly so the chip labels are actually visible. */
    color: #1f1f1f !important;
    background-color: #f5f5f5 !important;
    font-size: .9rem;
    padding: .5rem .8rem;
    border: 1px solid #ececec;
    transition: border-color .15s ease, color .15s ease, background-color .15s ease;
}
.hire-chip-list .badge:hover,
.hire-chip-list .badge:focus-visible{
    border-color: #22C62C;
    color: #22C62C !important;
    background-color: #f5fdf5 !important;
}