/* PayStubCheck 2026 — calculator suite theme layer.
   Recreates the reference calculators-landing layout (hero panel, light cards, featured card)
   in the PayStubCheck palette. Loaded after the calculator layout CSS; scoped to calculator pages. */
body.pc-page { background: #F6F8F2; padding-top: 0; }
body.pc-page main.pc-main { padding-top: var(--psx-nav-h); }

/* ---------- /calculators/ landing ---------- */
body.pc-calculators .calc-hub-main { padding-top: 48px; }
body.pc-calculators .calc-hub-intro {
  align-items: center; grid-template-columns: minmax(0,1.2fr) minmax(0,.85fr); gap: 38px; margin-bottom: 52px;
  padding: clamp(26px,4vw,48px); border: 1px solid #CFDDD5; border-radius: 22px;
  background: radial-gradient(circle at 92% 12%, rgba(247,160,46,.16), transparent 34%), linear-gradient(128deg,#04201A,#072B21 62%,#0F4D3A);
  box-shadow: 0 18px 40px rgba(7,43,33,.14);
}
body.pc-calculators .calc-hub-intro h1 { margin: 0 0 22px; color: #F6F8F2; font: 800 clamp(2rem,3.2vw,3rem)/1.06 "Bricolage Grotesque", sans-serif; letter-spacing: -.03em; }
body.pc-calculators .calc-hub-intro h1 span { display: block; color: #FDB447; }
body.pc-calculators .calc-hub-intro p { color: #CFE6D9; font-size: 1rem; line-height: 1.75; }
body.pc-calculators .calc-hub-intro .calc-hub-kicker { display: block; margin-bottom: 14px; color: #FDB447; font: 600 .75rem/1.6 "JetBrains Mono", monospace; letter-spacing: .1em; text-transform: uppercase; }
body.pc-calculators .lf-calc-assurance { display: flex; flex-wrap: wrap; gap: 10px 18px; margin-top: 24px; font-size: .8125rem; line-height: 1.7; color: #CFE6D9; }
body.pc-calculators .lf-calc-assurance span::before { content: "✓"; margin-right: 6px; color: #FDB447; font-weight: 800; }
body.pc-calculators .lf-calc-assurance a { color: #FDB447; text-underline-offset: 4px; }
body.pc-calculators .lf-calc-paths { min-width: 0; padding-left: 28px; border-left: 1px solid #2E6B55; }
body.pc-calculators .lf-calc-paths > p { color: #FDB447; font-size: .8125rem; margin: 0 0 10px; }
body.pc-calculators .lf-calc-paths a { display: flex; justify-content: space-between; align-items: center; gap: 18px; padding: 18px 12px; margin: 0 -12px; border-bottom: 1px solid #1F5A45; border-radius: 10px; color: #F6F8F2; text-decoration: none; transition: background .18s ease; }
body.pc-calculators .lf-calc-paths a:last-child { border-bottom: 0; }
body.pc-calculators .lf-calc-paths a strong { display: block; font-size: 1rem; line-height: 1.4; color: #F6F8F2; }
body.pc-calculators .lf-calc-paths a small { display: block; margin-top: 5px; font-size: .875rem; line-height: 1.5; color: #CFE6D9; }
body.pc-calculators .lf-calc-paths a > span:last-child { flex-shrink: 0; color: #FDB447; font: 500 .75rem/1.5 "JetBrains Mono", monospace; }
body.pc-calculators .lf-calc-paths a:hover, body.pc-calculators .lf-calc-paths a:focus-visible { background: rgba(255,255,255,.07); outline: none; }
body.pc-calculators .lf-calc-paths a:hover strong, body.pc-calculators .lf-calc-paths a:focus-visible strong { color: #FDB447; }

body.pc-calculators .calc-hub-group-head h2 { scroll-margin-top: calc(var(--psx-nav-h) + 26px); font-weight: 700; line-height: 1.15; letter-spacing: -.02em; }
body.pc-calculators .calc-hub-group-head > span { border: 1px solid #CFDDD5; background: #fff; color: #136B4B; }
body.pc-calculators .calc-hub-group-head p { font-size: 1rem; }
body.pc-calculators .calc-hub-grid { gap: 18px; }

body.pc-calculators .calc-hub-card {
  min-height: 318px; padding: 24px; gap: 14px; border: 1px solid #D6E3DA; border-radius: 16px;
  background: #FFFFFF; color: #072B21; box-shadow: 0 4px 14px rgba(7,43,33,.04);
}
body.pc-calculators .calc-hub-card::before { display: none; }
body.pc-calculators .calc-hub-card .calc-hub-icon { border: 1px solid #D8E6DD; background: #EEF7F1; color: #136B4B; border-radius: 12px; }
body.pc-calculators .calc-hub-card .calc-hub-arrow { background: transparent; border: 0; color: #136B4B; }
body.pc-calculators .calc-hub-card .calc-hub-label { margin-top: 3px; color: #B96A0C; font-size: .75rem; line-height: 1.5; letter-spacing: .045em; }
body.pc-calculators .calc-hub-card h3 { color: #072B21; font-size: 1.5rem; font-weight: 700; line-height: 1.18; letter-spacing: -.02em; }
body.pc-calculators .calc-hub-card p { color: #4A5D55; font-size: 1rem; line-height: 1.65; }
body.pc-calculators .calc-hub-card strong { display: flex; width: 100%; padding-top: 18px; border-top: 1px solid #E1ECE5; color: #072B21; font-size: .875rem; line-height: 1.5; }
/* Hover / keyboard focus: the whole card background changes (not text only). */
body.pc-calculators .calc-hub-card:hover, body.pc-calculators .calc-hub-card:focus-visible {
  background: #E3F1E8; border-color: #187A55; transform: translateY(-3px); box-shadow: 0 12px 28px rgba(7,43,33,.12);
}
body.pc-calculators .calc-hub-card:focus-visible { outline: 3px solid #F7A02E; outline-offset: 3px; }
body.pc-calculators .calc-hub-card:hover p, body.pc-calculators .calc-hub-card:focus-visible p { color: #2E4239; }
body.pc-calculators .calc-hub-card:hover strong, body.pc-calculators .calc-hub-card:focus-visible strong { color: #072B21; }
body.pc-calculators .calc-hub-card:hover .calc-hub-label, body.pc-calculators .calc-hub-card:focus-visible .calc-hub-label { color: #8A5A0F; }
body.pc-calculators .calc-hub-card:hover .calc-hub-icon, body.pc-calculators .calc-hub-card:focus-visible .calc-hub-icon,
body.pc-calculators .calc-hub-card:hover .calc-hub-arrow, body.pc-calculators .calc-hub-card:focus-visible .calc-hub-arrow {
  color: #fff; background: #187A55; border-color: #187A55;
}
body.pc-calculators .calc-hub-card--featured { background: linear-gradient(160deg,#072B21,#0F4D3A); border-color: #072B21; }
body.pc-calculators .calc-hub-card--featured h3, body.pc-calculators .calc-hub-card--featured strong { color: #F6F8F2; }
body.pc-calculators .calc-hub-card--featured p { color: #CFE6D9; }
body.pc-calculators .calc-hub-card--featured strong { border-color: #1F5A45; }
body.pc-calculators .calc-hub-card--featured .calc-hub-label, body.pc-calculators .calc-hub-card--featured .calc-hub-arrow { color: #FDB447; }
body.pc-calculators .calc-hub-card--featured .calc-hub-icon { color: #FDB447; border-color: #2E6B55; background: #0F4D3A; }
body.pc-calculators .calc-hub-card--featured:hover, body.pc-calculators .calc-hub-card--featured:focus-visible { background: linear-gradient(160deg,#0F4D3A,#187A55); border-color: #F7A02E; }
body.pc-calculators .calc-hub-card--featured:hover p, body.pc-calculators .calc-hub-card--featured:focus-visible p { color: #E3F1E8; }
body.pc-calculators .calc-hub-card--featured:hover strong, body.pc-calculators .calc-hub-card--featured:focus-visible strong { color: #fff; }
body.pc-calculators .calc-hub-card--featured:hover .calc-hub-label, body.pc-calculators .calc-hub-card--featured:focus-visible .calc-hub-label { color: #FDB447; }
body.pc-calculators .calc-hub-card--featured:hover .calc-hub-icon, body.pc-calculators .calc-hub-card--featured:focus-visible .calc-hub-icon,
body.pc-calculators .calc-hub-card--featured:hover .calc-hub-arrow, body.pc-calculators .calc-hub-card--featured:focus-visible .calc-hub-arrow { color: #072B21; background: #F7A02E; border-color: #F7A02E; }

body.pc-calculators .calc-hub-callout { background: #fff; border-color: #D6E3DA; }
body.pc-calculators .calc-hub-callout-actions a, body.pc-calculators .calc-hub-callout-actions a:visited { color: #fff !important; background: #0F4D3A; }
body.pc-calculators .calc-hub-callout-actions a:last-child { color: #072B21 !important; background: #F7A02E; }
body.pc-calculators .calc-hub-callout-actions a:hover, body.pc-calculators .calc-hub-callout-actions a:focus-visible { background: #187A55; color: #fff !important; }
body.pc-calculators .calc-hub-callout-actions a:last-child:hover, body.pc-calculators .calc-hub-callout-actions a:last-child:focus-visible { background: #FDB447; color: #072B21 !important; }

@media (max-width: 1100px) { body.pc-calculators .calc-hub-grid { grid-template-columns: repeat(2,minmax(0,1fr)); } }
@media (max-width: 900px) {
  body.pc-calculators .calc-hub-intro { grid-template-columns: 1fr; }
  body.pc-calculators .lf-calc-paths { border-left: 0; border-top: 1px solid #2E6B55; padding: 20px 0 0; }
}
@media (max-width: 600px) {
  body.pc-calculators .calc-hub-main { padding-top: 32px; }
  body.pc-calculators .calc-hub-grid { grid-template-columns: 1fr; }
  body.pc-calculators .calc-hub-card { min-height: 0; }
  body.pc-calculators .calc-hub-intro { padding: 24px; }
}
@media (prefers-reduced-motion: reduce) {
  body.pc-calculators .calc-hub-card, body.pc-calculators .calc-hub-card:hover { transition: none; transform: none; }
}