/* ============================================================
   /employers page: Advertise landing page redesign
   Adapted from Designs/export_advertise/ (Claude Design export)
   Reuses site tokens (#01579b primary, .nt-btn--emp orange, the
   .hero-search gradient/pattern from the homepage) rather than
   the export's standalone --m-* token set.
   ============================================================ */

:root {
	/* Design calls for #f57c00, which is only 2.70:1 on white and fails
	   WCAG AA. #e65100 is the agreed compromise: 3.79:1, close to the
	   mockup's brightness, clears the 3:1 bar for large text/icons.
	   (The site-wide .nt-btn--emp stays #c2410c, unchanged here.) */
	--adv-orange:      #e65100;
	--adv-orange-dark: #bf360c;
}

/* Hero and Get-Started are rendered as siblings of .container (same
   DOM position as the homepage's .hero-search. See header.php's
   $heroHtml hook and the $fullWidthMain flag set in employers.php)
   so they paint edge-to-edge with no CSS width tricks needed. */

/* ---- Hero (same gradient/pattern as homepage .hero-search) ---- */
.adv-hero {
	padding: 48px 0 44px 0;
	background-color: #0e529e;
	background-image:
		repeating-linear-gradient(
			135deg,
			rgba(255,255,255,0.06) 0px,
			rgba(255,255,255,0.06) 2px,
			transparent 2px,
			transparent 14px
		),
		linear-gradient(180deg, #0e529e 0%, #0a3f7a 100%);
	border-bottom: 3px solid #ffd54f;
	text-align: center;
}
.adv-hero-inner { max-width: 760px; margin: 0 auto; padding: 0 24px; }
.adv-hero h1 {
	color: #fff;
	font-size: 2.25rem;
	font-weight: 500;
	letter-spacing: -0.01em;
	margin: 0 0 12px 0;
	line-height: 1.25;
}
.adv-hero-sub {
	color: rgba(255,255,255,0.85);
	font-size: 1.05rem;
	font-weight: 300;
	margin: 0 0 26px 0;
	line-height: 1.5;
}
/* Scoped to this hero so the shared .nt-btn--emp (homepage CTA cards)
   keeps its own #c2410c and is not affected. */
.adv-hero .nt-btn--emp { background-color: var(--adv-orange) !important; }
.adv-hero .nt-btn--emp:hover,
.adv-hero .nt-btn--emp:focus { background-color: var(--adv-orange-dark) !important; }

/* ---- Generic section wrapper ---- */
.adv-section { max-width: 1024px; margin: 0 auto; padding: 48px 24px; }
.adv-section h2.bigger { text-align: center; margin: 0 0 28px 0; }

/* ---- Why NeedTechs (3 icon cards) ---- */
.adv-why-row { display: flex; gap: 24px; justify-content: center; flex-wrap: wrap; }
.adv-why-card {
	width: 300px;
	text-align: center;
	overflow: hidden;
	transition: box-shadow .25s, transform .15s;
}
.adv-why-card:hover { transform: translateY(-2px); }
.adv-why-card .adv-why-icon {
	background: var(--adv-orange);
	color: #fff;
	padding: 26px 0 22px 0;
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 6px;
}
.adv-why-card .adv-why-icon .material-icons { font-size: 52px; }
.adv-why-card .adv-why-label {
	font-size: 0.68rem;
	letter-spacing: 0.18em;
	font-weight: 700;
	text-transform: uppercase;
	/* ~10px, so WCAG treats it as small text and wants 4.5:1. White on
	   --adv-orange is only 3.79:1 (and the old opacity:.88 dropped it to
	   3.25:1), so this label is dark ink: 5.02:1. The 52px icon above
	   stays white. As a graphical object it only needs 3:1. */
	color: rgba(0,0,0,0.87);
}
.adv-why-card .adv-why-body { padding: 16px 18px 14px; }
.adv-why-card .adv-why-title {
	font-size: 1.15rem;
	font-weight: 500;
	line-height: 1.25;
	color: rgba(0,0,0,0.87);
	margin: 0 0 6px 0;
}
.adv-why-card .adv-why-text {
	font-size: 0.85rem;
	color: rgba(0,0,0,0.6);
	line-height: 1.5;
	margin: 0;
}

/* ---- By The Numbers (stat cards) ---- */
.adv-stats-section { padding-top: 0; }
.adv-stats-row {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 20px;
}
.adv-stat {
	text-align: center;
	padding: 22px 18px;
	border-top: 4px solid #01579b;
}
.adv-stat .adv-stat-n { font-size: 1.7rem; font-weight: 700; color: #01579b; }
.adv-stat .adv-stat-l {
	font-size: 0.8rem;
	color: rgba(0,0,0,0.6);
	margin-top: 8px;
	line-height: 1.5;
	max-width: 240px;
	margin-left: auto;
	margin-right: auto;
}

/* ---- The Shortage Is Real ---- */
/* Full-bleed grey band, flush against the hero's yellow border (no top
   padding here; the inner block supplies the breathing room). */
.adv-shortage-wrap { background: #f6f7f9; padding: 0 24px; }
.adv-shortage { max-width: 820px; margin: 0 auto; padding: 48px 0; }
.adv-shortage h2.bigger { text-align: left; }
.adv-shortage p {
	border-left: 5px solid var(--adv-orange);
	padding: 2px 0 2px 20px;
	font-size: 0.95rem;
	line-height: 1.65;
	color: #333;
	margin: 0;
}

/* ---- Who We Work With (make pills) ---- */
.adv-makes-section { padding-top: 0; padding-bottom: 40px; }
.adv-makes-row { display: flex; align-items: center; flex-wrap: wrap; gap: 8px; justify-content: center; }
.adv-makes-row .make-pill { color: rgba(0,0,0,0.6) !important; border-color: rgba(0,0,0,0.2); }
.adv-makes-row .make-pill:hover { background: rgba(0,0,0,0.05); border-color: rgba(0,0,0,0.4); }

/* ---- Get Started (choice cards, same hero gradient) ---- */
.adv-getstarted {
	background-color: #0e529e;
	background-image:
		repeating-linear-gradient(
			135deg,
			rgba(255,255,255,0.06) 0px,
			rgba(255,255,255,0.06) 2px,
			transparent 2px,
			transparent 14px
		),
		linear-gradient(180deg, #0e529e 0%, #0a3f7a 100%);
	border-top: 3px solid #ffd54f;
	border-bottom: 3px solid #ffd54f;
	padding: 52px 24px 60px;
	text-align: center;
	scroll-margin-top: 0;
}
.adv-step-tag {
	display: inline-block;
	background: #ffd54f;
	color: #0a3f7a;
	font-size: 0.68rem;
	font-weight: 700;
	letter-spacing: 0.12em;
	text-transform: uppercase;
	padding: 5px 12px;
	border-radius: 2px;
	margin-bottom: 16px;
}
.adv-getstarted h2.bigger { color: #fff; margin: 0 0 8px 0; font-size: 2rem; }
.adv-getstarted-sub { color: rgba(255,255,255,0.9); font-size: 1rem; font-weight: 300; margin: 0 0 30px 0; }
/* Sizes below are px (not rem) to match the design exactly. The site's
   root font-size shifts 14px/14.5px/15px across breakpoints, which would
   make rem values drift away from the mockup. */
.adv-choice-row {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 24px;
	max-width: 820px;
	margin: 0 auto;
	align-items: stretch;
}
.adv-choice {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 8px;
	padding: 30px 26px 26px;
	text-align: center;
	text-decoration: none;
	color: inherit;
	transition: box-shadow .2s, transform .15s;
	/* design --z3; Materialize .z-depth-3 is much heavier than the mockup */
	box-shadow: 0 4px 8px 0 rgba(0,0,0,.14), 0 1px 10px 0 rgba(0,0,0,.12), 0 4px 5px 0 rgba(0,0,0,.2);
}
.adv-choice:hover {
	transform: translateY(-3px);
	/* design --z5 */
	box-shadow: 0 16px 24px 2px rgba(0,0,0,.14), 0 6px 30px 5px rgba(0,0,0,.12), 0 8px 10px -7px rgba(0,0,0,.2);
}
.adv-choice .material-icons.adv-choice-icon { font-size: 44px; color: #01579b; }
.adv-choice.shop .adv-choice-icon { color: var(--adv-orange); }
.adv-choice .adv-choice-lbl { font-size: 22px; font-weight: 700; color: rgba(0,0,0,0.87); }
.adv-choice .adv-choice-sub { font-size: 13px; color: rgba(0,0,0,0.6); line-height: 1.5; max-width: 280px; }
/* Materialize .btn defaults to 36px/normal weight; the design calls for
   a chunkier 48px/600 button, so override height and line-height. */
.adv-choice .adv-choice-go {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 8px;
	width: 100%;
	height: 48px;
	line-height: 48px;
	margin-top: auto;
	font-size: 14px;
	font-weight: 600;
	letter-spacing: 0.05em;
	background-color: #01579b !important;
}
.adv-choice .adv-choice-go .material-icons { font-size: 18px; margin: 0; }
.adv-choice.shop .adv-choice-go { background-color: var(--adv-orange) !important; }
.adv-choice.shop .adv-choice-go:hover { background-color: var(--adv-orange-dark) !important; }

@media only screen and (max-width: 760px) {
	.adv-stats-row, .adv-choice-row { grid-template-columns: 1fr; }
}