:root {
	--primary-color: #a50000;
	--primary-hover: #840000;
	--secondary-color: #313f8c;
	--primary60: #a50000;
	--primary70: #840000;
	--secondary60: #313f8c;
}

/* =========  FONT & ROOT COLORS  ========= */
@import url("https://fonts.googleapis.com/css2?family=Inter:wght@400;500;700&display=swap");

:root {
  --clr-primary: #164b82;     /* navy for headings */
  --clr-accent:  #ff715b;     /* coral accent */
  --clr-dark:    #1f2d3d;
  --clr-light:   #f8fafc;
  --radius: 0.75rem;
  --shadow: 0 4px 12px rgba(0,0,0,.08);
}

body {
  font-family: "Inter", sans-serif;
  color: var(--clr-dark);
  background: var(--clr-light);
  margin: 0;
  line-height: 1.55;
}

/* =========  WHY SECTION  ========= */
.why {
  background: #fff;
  padding: 3.5rem 1.25rem;
  text-align: center;
}

.why h2 {
  font-size: 2rem;
  margin: 0 0 2rem;
  color: var(--clr-primary);
}

.why__items {
  display: grid;
  gap: 1.5rem;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  max-width: 1000px;
  margin: 0 auto;
}

.why__item {
  background: var(--clr-light);
  padding: 1.75rem 1.25rem;
  border-radius: var(--radius);
  box-shadow: var(--shadow);
}

.why__item h3 {
  margin: 0 0 .5rem;
  color: var(--clr-accent);
  font-size: 1.15rem;
}

/* =========  JOB LISTINGS AS CARDS  ========= */
#content h1 {                     /* section heading auto-generated by PrismHR */
  text-align: center;
  color: var(--clr-primary);
  margin-top: 3rem;
}

#content > div:not(:first-child) { /* job grid wrapper */
  display: grid;
  gap: 1.5rem;
  grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
  max-width: 1050px;
  margin: 2rem auto 4rem;
  padding: 0 1rem;
}

#content a[href*="/job/"] {       /* each job card */
  display: block;
  background: #fff;
  color: var(--clr-dark);
  padding: 1.5rem 1.25rem 2.5rem;
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  text-decoration: none;
  transition: all 0.25s ease;
}

#content a[href*="/job/"]:hover {
  transform: translateY(-4px);
  box-shadow: 0 8px 18px rgba(0,0,0,.12);
}

#content a[href*="/job/"] h2,
#content a[href*="/job/"] h3 {
  margin: 0 0 .4rem;
  color: var(--clr-primary);
  font-size: 1.15rem;
}

#content a[href*="/job/"] .location,
#content a[href*="/job/"] p {
  font-size: .9rem;
  opacity: .8;
}

/* =========  FOOTER  ========= */
footer, .footer, #footer {
  background: transparent;
  text-align: center;
  padding: 2rem 1rem;
  font-size: .85rem;
  color: var(--clr-dark);
  opacity: .6;
}