:root {
	--primary-color: #00A573;
	--secondary-color: #00562D;
	--primary-hover: #00845C;
	--primary60: #00A573;
	--primary70: #00845C;
	--secondary60: #00562D;
}

/* ======================================================
   EPICURED CAREERS – FINAL BRAND-ALIGNED CSS (WITH WRAPPER FIX)
   ====================================================== */

/* ---------- GLOBAL FONT + PAGE BACKGROUND ---------- */
html, body {
  font-family: Inter, system-ui, -apple-system, BlinkMacSystemFont,
               "Segoe UI", Roboto, Helvetica, Arial, sans-serif !important;
  background-color: #F6F4EE !important; /* soft brand stone */
}

/* Kill PrismHR white wrappers (common container class/IDs) */
#content, #main, #container, #page,
.wrapper, .main, .content, .container, .page-content, .main-content,
.content-wrapper, .section, .panel, .panel-body, .card, .card-body {
  background: transparent !important;
}

/* If Prism uses table-based wrappers */
table, tbody, tr, td {
  background: transparent !important;
}

/* ---------- BASE TEXT ---------- */
body, p, li, label, input, textarea, select {
  font-size: 18px;
  line-height: 1.7;
  color: #2F2F2F;
  font-weight: 400;
}

/* ---------- HEADINGS ---------- */
h1, h2, h3, h4, .page-title, .job-title {
  color: #0B3D2A;
  font-weight: 700;
  letter-spacing: -0.2px;
}

/* ---------- LINKS ---------- */
a {
  color: #0B3D2A;
  text-decoration: underline;
  text-underline-offset: 2px;
}
a:hover { color: #00A573; }

/* ---------- GLOBAL BUTTONS ---------- */
button, .btn, .button, input[type="submit"], input[type="button"] {
  font-family: inherit;
  background-color: #0B3D2A;
  border-color: #0B3D2A;
  color: #ffffff;
  border-radius: 16px;
  padding: 14px 22px;
  font-weight: 600;
  font-size: 15px;
  box-shadow: 0 12px 22px rgba(11, 61, 42, 0.18);
}
button:hover, .btn:hover, .button:hover,
input[type="submit"]:hover, input[type="button"]:hover {
  background-color: #00A573;
  border-color: #00A573;
}

/* ======================================================
   HERO SECTION
   ====================================================== */

.epc3-hero {
  max-width: 1200px;
  margin: 0 auto 32px auto;
  padding: 24px 16px 12px 16px;
}

.epc3-hero__inner {
  position: relative;
  background: #FBF8F2; /* light brand cream */
  border: 1px solid #E6E0D6;
  border-radius: 22px;
  padding: 44px 42px 36px 42px;
  box-shadow: 0 10px 26px rgba(0,0,0,0.10);
  overflow: hidden;
}

.epc3-hero__inner::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0;
  width: 8px;
  height: 100%;
  background: linear-gradient(180deg, #00A573 0%, #0B3D2A 100%);
}

.epc3-hero__inner::after {
  content: "";
  position: absolute;
  right: 0;
  top: 0;
  width: 8px;
  height: 100%;
  background: linear-gradient(180deg, #00A573 0%, #0B3D2A 100%);
}

.epc3-hero__kicker,
.epc3-hero__title,
.epc3-hero__lead,
.epc3-hero__actions,
.epc3-hero__secondary {
  padding-left: 12px;
}

.epc3-hero__kicker {
  display: block;
  font-size: 18px;
  font-weight: 600;
  color: #0B3D2A;
  margin-bottom: 18px;
}

.epc3-hero__title {
  margin: 0 0 28px 0;
  font-size: 46px;
  line-height: 1.05;
  font-weight: 700;
  letter-spacing: -0.5px;
  color: #0B3D2A;
}

.epc3-hero__lead {
  margin: 8px 0 20px 0;
  font-size: 20px;
  line-height: 1.7;
  max-width: 920px;
}

.epc3-hero__actions {
  display: flex;
  gap: 18px;
  flex-wrap: wrap;
  margin-top: 28px;
}

.epc3-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 18px;
  padding: 16px 28px;
  font-weight: 600;
  font-size: 15px;
  text-decoration: none;
  border: 1px solid transparent;
  transition: transform 120ms ease, box-shadow 120ms ease;
}

.epc3-btn--primary {
  background: #0B3D2A;
  color: #ffffff;
  box-shadow: 0 16px 28px rgba(11, 61, 42, 0.22);
}
.epc3-btn--primary:hover {
  background: #00A573;
  transform: translateY(-1px);
}

.epc3-btn--ghost {
  background: #ffffff;
  border-color: #D4DDD7;
  color: #0B3D2A;
  box-shadow: 0 10px 18px rgba(0,0,0,0.10);
}
.epc3-btn--ghost:hover {
  border-color: #00A573;
  transform: translateY(-1px);
}

.epc3-hero__secondary {
  margin-top: 30px;
  padding-top: 20px;
  border-top: 1px solid #D3CCBF;
}

.epc3-hero__secondary p {
  font-size: 16px;
  color: #3A3A3A;
  max-width: 860px;
}

@media (max-width: 520px) {
  .epc3-hero__inner { padding: 26px; }
  .epc3-hero__title { font-size: 32px; }
  .epc3-hero__lead { font-size: 17px; }
  .epc3-hero__kicker,
  .epc3-hero__title,
  .epc3-hero__lead,
  .epc3-hero__actions,
  .epc3-hero__secondary { padding-left: 10px; }
}