/* Free Tools: v2 design layer. Loaded after raha.css on every non-embed tools page
   (guides, IRS notices, state rules, nexus, reports, calculators) and restyles the shared
   raha.css components to the homepage v2 look: compact tint header, pastel rounded cards,
   pill buttons, soft fields, bold tight type. Embed pages do not load this file. */

:root {
  /* raha.css redefines these; keep the site header/footer on the homepage values */
  --ink: #0b1220;
  --line: #e1e7f2;
  --ink-2: #46526b;
  --ink-3: #6b7690;
  --bg-2: #f5f7fb;
  --radius: 24px;
  --radius-sm: 16px;
  --shadow: 0 0 0 1px var(--line), 0 30px 50px -40px rgba(10, 26, 63, .35);
}
body.hv { background: #fff; color: var(--ink); line-height: 1.6; }


/* ---------- page header (lifted from each page's intro by the migration) ---------- */
.tl-hero .hv-wrap { max-width: calc(var(--wrap) + 48px); }
.tl-hero .tl-eyebrow { display: block; margin-bottom: 12px; font-size: 15px; font-weight: 600; color: var(--brand); }
.tl-hero .hv-h1 { max-width: 900px; }
.tl-hero .hv-lead { max-width: 820px; }
.tl-hero .tl-meta { margin-top: 18px; font-size: 14px; font-weight: 500; color: var(--muted); }
.tl-hero .tl-meta a { color: var(--brand); }
.tl-hero .tl-meta .badge { margin: 0 2px; }

/* ---------- content column ---------- */
main > .wrap { max-width: calc(var(--wrap) + 48px); padding: 56px 24px 24px; }
.wrap { padding-left: 24px; padding-right: 24px; }
.beta-bar .wrap { max-width: calc(var(--wrap) + 48px); }
.beta-bar .wrap a, .beta-bar .wrap strong { color: #5c3b00; }
.wrap h1, .wrap h2, .wrap h3, .wrap h4 { color: var(--ink); }
.wrap h2 { font-size: clamp(26px, 2.6vw, 34px); line-height: 1.15; letter-spacing: -0.032em; margin: 2em 0 .55em !important; }
.wrap h3 { font-size: 20px; line-height: 1.3; letter-spacing: -0.02em; }
.wrap > h2:first-child, .wrap > .section:first-child > h2:first-child, .wrap .card > h2:first-child, .wrap .card > h3:first-child, .wrap section.card > h2 { margin-top: 0 !important; }
.wrap p, .wrap li { color: var(--ink-2); }
.wrap p { line-height: 1.75; }
.wrap strong { color: var(--ink); font-weight: 600; }
.wrap a { color: var(--brand); text-underline-offset: 3px; }
.section { padding: 8px 0 32px; }
.prose { max-width: 900px; }
.prose > p, .prose > ul, .prose > ol { font-size: 17px; }

/* small labels still inside the content (e.g. "Free tool" on a related-tool card) */
.wrap .eyebrow { padding: 6px 12px !important; margin: 0 0 12px !important; border-radius: 999px; background: var(--tint); font-size: 12.5px; letter-spacing: .06em; color: var(--brand); }
.wrap .capsule { border: 0; padding: 0 !important; font-size: 18px; color: var(--ink-2); }
.wrap .meta-line { font-size: 14px; color: var(--muted); }

/* ---------- cards ---------- */
.card { padding: 32px; border: 0; border-radius: 32px; background: #fff; box-shadow: var(--shadow); }
.tool-grid { gap: 24px; }
.tool-grid > .card:first-child { background: var(--tint); box-shadow: none; }

/* ---------- forms ---------- */
.tool-form legend, .field > label, .field-label { font-size: 15px; font-weight: 600; color: var(--ink); margin-bottom: 8px; }
.hint { font-size: 13.5px; color: var(--muted); }
.field input[type="number"], .field input[type="text"], .field input[type="email"], .field input[type="date"], .field select, .field textarea {
  min-height: 54px; padding: 12px 16px; border: 1px solid transparent; border-radius: 16px; background: #fff; font-size: 15.5px;
  box-shadow: 0 0 0 1px var(--line); transition: border-color .2s ease, box-shadow .2s ease; }
.card:not(.tool-grid > .card:first-child) .field input, .card:not(.tool-grid > .card:first-child) .field select, .card:not(.tool-grid > .card:first-child) .field textarea { background: var(--alt); box-shadow: none; }
.field input:hover, .field select:hover, .field textarea:hover { border-color: #c7d3ec; }
.field input:focus, .field select:focus, .field textarea:focus { outline: 0; border-color: var(--brand); background: #fff; box-shadow: 0 0 0 5px rgba(20, 69, 194, .12); }
.money > span { left: 16px; }
.money input { padding-left: 30px !important; }
.pct > span { right: 16px; }
.choices label { min-height: 46px; padding: 10px 18px; border: 0; border-radius: 999px; background: #fff; box-shadow: 0 0 0 1px var(--line); font-size: 14.5px; transition: background-color .2s ease, box-shadow .2s ease, color .2s ease; }
.choices label:hover { box-shadow: 0 0 0 1px #c7d3ec; }
.choices label:has(input:checked) { background: var(--brand); color: #fff; box-shadow: none; }
.choices label:has(input:checked) input { accent-color: #fff; }
.checks label { padding: 14px 16px; border: 0; border-radius: 16px; background: #fff; box-shadow: 0 0 0 1px var(--line); }
.checks label:has(input:checked) { background: #fff; box-shadow: 0 0 0 2px var(--brand); }

/* ---------- buttons (homepage pill buttons) ---------- */
.btn { min-height: 52px; padding: 0 26px; border-radius: 999px; font-size: 15px; transition: background-color .2s ease, color .2s ease, box-shadow .2s ease, transform .2s ease; }
.btn-primary { background: var(--brand); color: #fff; }
.btn-primary:hover { background: var(--brand-dk); color: #fff; transform: translateY(-1px); }
.btn-ghost { background: #fff; color: var(--ink); border: 0; box-shadow: 0 0 0 1px var(--line); }
.btn-ghost:hover { color: var(--brand); box-shadow: 0 0 0 1px var(--brand); }
.btn-row { gap: 12px; }
.wrap a.btn { text-decoration: none; }
.wrap a.btn-primary { color: #fff; }

/* ---------- results ---------- */
.verdict { padding: 22px 24px; border: 0; border-radius: 24px; }
.verdict h3, .verdict .vt { font-size: 20px; letter-spacing: -0.02em; }
.verdict.good { background: var(--p-mint); }
.verdict.warn { background: #fff4df; }
.verdict.bad { background: #fdecec; }
.verdict.info { background: var(--p-blue); }
.stats { gap: 12px; }
.stat { padding: 16px 18px; border: 0; border-radius: 18px; background: var(--alt); }
.stat .v { font-size: 24px; letter-spacing: -0.03em; }
.badge { padding: 4px 10px; font-size: 12.5px; }
.note { padding: 14px 16px; border-radius: 16px; background: var(--alt); }

/* ---------- tables ---------- */
.table-scroll { border: 0; border-radius: 24px; box-shadow: 0 0 0 1px var(--line); background: #fff; }
.wrap table { font-size: 15px; }
.wrap th, .wrap td { padding: 14px 18px; border-bottom: 1px solid var(--line); }
.wrap thead th, .wrap th[scope="col"] { background: var(--tint); color: var(--ink); font-weight: 600; }
.wrap tbody th[scope="row"] { background: var(--alt); font-weight: 600; color: var(--ink); }
.wrap tbody tr:last-child > * { border-bottom: 0; }
.wrap tbody tr:hover > td { background: #fafbfe; }

/* ---------- FAQ ---------- */
.faq details { margin-bottom: 12px; padding: 0 24px; border: 0; border-radius: 20px; background: var(--alt); transition: background-color .2s ease; }
.faq details[open] { background: var(--tint); }
.faq summary { padding: 20px 0; font-weight: 600; }
.faq summary h3 { font-size: 17px !important; }
.faq details[open] summary { border-bottom-color: rgba(20, 69, 194, .12); }
.faq details > div { padding-bottom: 6px; }

/* ---------- author, disclaimer, sources ---------- */
.author { gap: 18px; padding: 24px; border: 0; border-radius: 24px; background: var(--p-blue); }
.author .avatar { width: 52px; height: 52px; border-radius: 16px; font-size: 20px; }
.disclaimer { padding: 16px 20px; border: 0; border-radius: 16px; background: var(--alt); font-size: 14px; }
.sources { font-size: 14px; }

/* ---------- related links and hubs: homepage pastel cards ---------- */
.related { gap: 16px; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); }
.related a { display: flex; flex-direction: column; gap: 6px; padding: 22px 24px; border: 0; border-radius: 24px; background: var(--p-blue); text-decoration: none; transition: transform .25s cubic-bezier(.22, .8, .24, 1); }
.related a:nth-child(4n+2) { background: var(--p-sky); }
.related a:nth-child(4n+3) { background: var(--p-lav); }
.related a:nth-child(4n+4) { background: var(--p-mint); }
.related a:hover { transform: translateY(-4px); }
.related a strong { font-size: 17px; line-height: 1.3; letter-spacing: -0.015em; color: var(--ink); }
.related a span { font-size: 14px; color: var(--ink-2); }

.hub-grid { gap: 24px; grid-template-columns: repeat(auto-fill, minmax(320px, 1fr)); }
.hub-card { gap: 10px; padding: 32px; border: 0; border-radius: 32px; background: var(--p-blue); box-shadow: none; text-decoration: none; transition: transform .3s cubic-bezier(.22, .8, .24, 1); }
.hub-card:nth-child(4n+2) { background: var(--p-sky); }
.hub-card:nth-child(4n+3) { background: var(--p-lav); }
.hub-card:nth-child(4n+4) { background: var(--p-mint); }
.hub-card:hover { transform: translateY(-6px); }
.hub-card .tag { font-size: 13px; letter-spacing: .04em; color: var(--brand); }
.hub-card h3 { margin: 0 !important; font-size: 23px; line-height: 1.2; letter-spacing: -0.025em; color: var(--ink); }
.hub-card p { font-size: 15.5px; line-height: 1.6; color: var(--ink-2); }

/* ---------- CTAs inside tools ---------- */
.cta-soft { margin-top: 24px; padding-top: 20px; border-top: 1px solid var(--line); }
.offer { padding: 26px; border: 0; border-radius: 28px; color: rgba(255, 255, 255, .85); background: linear-gradient(135deg, #587edb 0%, #1445c2 100%); }
.offer h3, .offer .price { color: #fff; }
.offer li, .offer p { color: rgba(255, 255, 255, .85); }
.offer a:not(.btn) { color: #fff; }
.offer .btn-primary { background: #fff; color: var(--brand); }
.embed-box textarea { border: 0; border-radius: 16px; background: var(--alt); }

/* ---------- maps ---------- */
.legend { gap: 16px; font-size: 14px; }
.tile-map .t { border-radius: 6px; }

@media (max-width: 720px) {
  main > .wrap { padding-top: 36px; }
  .card { padding: 22px 18px; border-radius: 26px; }
  .hub-card { padding: 26px 22px; border-radius: 26px; }
  .wrap th, .wrap td { padding: 12px 14px; }
}
