/* ============================================================
   Custom Functions — blue/black theme override.
   Loads AFTER css/payroll.css. Scoped to body.custom-theme so it
   only recolors this page (red -> blue), reusing all the .pr-*
   structure from the EZ Payroll microsite.
   ============================================================ */

.custom-theme .pr-tag { color: var(--blue); }

/* Hero + dark backgrounds: swap red glow for blue */
.custom-theme .pr-hero {
  background:
    radial-gradient(circle at 86% 14%, rgba(26,60,143,0.55), transparent 52%),
    radial-gradient(circle at 10% 96%, rgba(232,180,0,0.14), transparent 46%),
    linear-gradient(120deg, #101a33 0%, #0a1020 100%);
}
.custom-theme .pr-dark-stack {
  background:
    radial-gradient(circle at 88% 9%, rgba(26,60,143,0.5), transparent 44%),
    radial-gradient(circle at 8% 50%, rgba(232,180,0,0.12), transparent 40%),
    radial-gradient(circle at 80% 92%, rgba(26,60,143,0.44), transparent 48%),
    linear-gradient(160deg, #101a33 0%, #0a1020 100%);
}
.custom-theme .pr-banner {
  background:
    radial-gradient(circle at 88% 16%, rgba(26,60,143,0.5), transparent 52%),
    radial-gradient(circle at 8% 92%, rgba(232,180,0,0.14), transparent 46%),
    linear-gradient(120deg, #101a33 0%, #0a1020 100%);
}
.custom-theme .pr-cta-band {
  background:
    radial-gradient(circle at 82% 20%, rgba(26,60,143,0.48), transparent 52%),
    linear-gradient(120deg, #101a33 0%, #0a1020 100%);
}
.custom-theme .pr-section-dark {
  position: relative;
  overflow: hidden;
  background:
    radial-gradient(circle at 88% 12%, rgba(26,60,143,0.46), transparent 46%),
    radial-gradient(circle at 8% 92%, rgba(232,180,0,0.12), transparent 42%),
    linear-gradient(120deg, #101a33 0%, #0a1020 100%);
}

/* Accent text + tags */
.custom-theme .pr-hero h1 em,
.custom-theme .pr-banner-text h2 em,
.custom-theme .pr-head h2 em { color: #5b8def; }
.custom-theme .pr-head .tag { color: var(--blue); }
.custom-theme .pr-head .tag::before { background: var(--blue); }

/* Buttons */
.custom-theme .pr-btn { background: var(--blue); }
.custom-theme .pr-btn:hover { background: #16316f; }

/* Feature icon tiles */
.custom-theme .pr-feat-ico { background: #e7edfa; color: var(--blue); }
.custom-theme .pr-feat-grid.tint .pr-feat { background: #f1f5fd; border-color: #d5e0f5; }
.custom-theme .pr-feat-grid.tint .pr-feat:hover {
  box-shadow: 0 16px 44px rgba(26,60,143,0.16);
  border-color: #c0d1f0;
}

/* Coverage codes + step numbers */
.custom-theme .pr-cover-item .code { color: var(--blue); }
.custom-theme .pr-gs-list .n { background: var(--blue); }

/* Pipeline nodes recolored blue */
.custom-theme .pr-pipe-line {
  background: linear-gradient(to right,
    rgba(26,60,143,0.25),
    rgba(26,60,143,0.95) 50%,
    rgba(232,180,0,0.9));
}
.custom-theme .pr-pipe-node {
  background: linear-gradient(150deg, #1a3c8f30, #0a1020);
  border-color: rgba(91,141,239,0.6);
  box-shadow: 0 12px 30px rgba(26,60,143,0.32), inset 0 0 20px rgba(26,60,143,0.14);
}
.custom-theme .pr-pipe-num { background: var(--blue); border-color: #0a1020; }
.custom-theme .pr-pipeline .pr-pipe-step h4 { color: var(--blue); }
.custom-theme .pr-pipeline .pr-pipe-step p { color: var(--blue); }

/* Burst behind the emblem tile */
.custom-theme .pr-bundle::before {
  background:
    radial-gradient(circle, rgba(26,60,143,0.6) 0%, rgba(26,60,143,0.24) 34%, transparent 62%);
}
.custom-theme .pr-bundle::after {
  background:
    repeating-conic-gradient(from 0deg at 50% 50%,
      rgba(91,141,239,0.2) 0deg 7deg,
      transparent 7deg 22deg);
}
.custom-theme .pr-bundle-link {
  background: var(--blue);
  box-shadow: 0 8px 22px rgba(26,60,143,0.6);
  border-color: #0a1020;
}
.custom-theme .pr-bundle-tile .vfd-emblem { color: var(--blue); width: 66px; height: 66px; }

/* White heading + subtext on dark sections */
.custom-theme h2.vfd-white,
.custom-theme h2.vfd-white em,
.custom-theme p.vfd-white { color: #fff; }
.custom-theme .vfd-dark-sec .pr-head h2.vfd-white em { color: #5b8def; }

/* Keep the hero bundle beside the text down to smaller widths */
@media (max-width: 980px) and (min-width: 720px) {
  .custom-theme .pr-hero-grid { grid-template-columns: 1.1fr 0.9fr; gap: 32px; }
  .custom-theme .pr-hero-grid .ph-visual { order: 0; }
  .custom-theme .pr-bundle { gap: 16px; }
  .custom-theme .pr-bundle-tile { width: 120px; height: 120px; }
}