/* Shared style for the content pages (About, Contact, FAQ, Guides and articles). Matches the calculator's teal palette. */
:root {
  --bg: #f4f6f5; --surface: #ffffff; --field: #f1f4f3; --ink: #10201e; --muted: #5d6b68; --line: #e2e7e5;
  --accent: #0e6b5c; --accent-soft: #e3f1ed; --gold: #b8892b; --hero-a: #0b5c4f; --hero-b: #13876f;
  --f-display: "Bricolage Grotesque", "Segoe UI", system-ui, sans-serif;
  --f-body: "Figtree", system-ui, -apple-system, "Segoe UI", sans-serif;
  color-scheme: light;
}
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) {
  --bg: #0d1413; --surface: #151f1d; --field: #1c2826; --ink: #e8efed; --muted: #93a19d; --line: #25322f;
  --accent: #4fc3a8; --accent-soft: #1a3430; --gold: #e0b75a; --hero-a: #0f4a40; --hero-b: #177a65; color-scheme: dark } }
:root[data-theme="dark"] {
  --bg: #0d1413; --surface: #151f1d; --field: #1c2826; --ink: #e8efed; --muted: #93a19d; --line: #25322f;
  --accent: #4fc3a8; --accent-soft: #1a3430; --gold: #e0b75a; --hero-a: #0f4a40; --hero-b: #177a65; color-scheme: dark }

* { box-sizing: border-box }
html { padding-block: env(safe-area-inset-top, 0px) env(safe-area-inset-bottom, 0px); -webkit-text-size-adjust: 100%; text-size-adjust: 100% }
body { margin: 0; overflow-x: clip; background: var(--bg); color: var(--ink); font: 16.5px/1.7 var(--f-body); -webkit-font-smoothing: antialiased; padding-inline: 16px }
img { max-width: 100% }
a { color: var(--accent); overflow-wrap: anywhere }
a:focus-visible, button:focus-visible, summary:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; border-radius: 4px }

/* Top bar */
.topbar { max-width: 860px; margin: 0 auto; display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 10px 20px; padding-block: 18px }
.brand { display: inline-flex; align-items: center; gap: 10px; text-decoration: none; color: var(--ink); font: 700 1.05rem var(--f-display) }
.brand i { width: 34px; height: 34px; border-radius: 10px; display: grid; place-items: center; font-style: normal; color: #fff; background: linear-gradient(145deg, var(--hero-b), var(--hero-a)) }
.nav { display: flex; flex-wrap: wrap; gap: 4px 16px; font-size: 14.5px; font-weight: 600 }
.nav a { color: var(--muted); text-decoration: none; padding: 4px 0 }
.nav a:hover, .nav a[aria-current="page"] { color: var(--accent) }

/* Article */
main { max-width: 860px; margin: 0 auto; background: var(--surface); border: 1px solid var(--line); border-radius: 20px; padding: clamp(22px, 5vw, 48px) }
.crumb { font-size: 13.5px; color: var(--muted); margin: 0 0 10px }
.crumb a { color: var(--muted) }
h1 { font: 700 clamp(1.8rem, 5vw, 2.6rem)/1.12 var(--f-display); letter-spacing: -.02em; margin: 0 0 10px; text-wrap: balance }
.lede { font-size: 1.12rem; color: var(--muted); margin: 0 0 8px; max-width: 64ch }
.meta { font-size: 13.5px; color: var(--muted); margin: 0 0 26px }
h2 { font: 700 1.35rem/1.25 var(--f-display); margin: 36px 0 10px; text-wrap: balance }
h3 { font: 600 1.05rem/1.4 var(--f-body); margin: 22px 0 6px }
p, li { max-width: 68ch }
p { margin: 0 0 14px }
ul, ol { padding-left: 22px; margin: 0 0 14px }
li { margin-bottom: 6px }
.note { background: var(--accent-soft); border-radius: 12px; padding: 14px 18px; margin: 18px 0; font-size: 15px }
.note p:last-child { margin: 0 }
.table-wrap { overflow-x: auto; margin: 0 0 18px; border: 1px solid var(--line); border-radius: 12px }
table { width: 100%; border-collapse: collapse; font-size: 15px; font-variant-numeric: tabular-nums }
th, td { padding: 10px 12px; text-align: left; border-bottom: 1px solid var(--line) }
td.num { white-space: nowrap }   /* keep amounts on one line; text cells and headings may wrap */
th { font-size: 13px; font-weight: 600; color: var(--muted); background: color-mix(in srgb, var(--accent-soft) 55%, transparent) }
tr:last-child td { border-bottom: 0 }
td.num, th.num { text-align: right }
.cols { columns: 3 180px; column-gap: 24px; padding-left: 20px }
.cols li { break-inside: avoid; margin-bottom: 4px }

/* AdSense display units (filled by ads.js): in the page flow and labelled */
.ad-slot { display: grid; gap: 4px; justify-items: center; margin: 26px 0 }
.ad-slot::before { content: "Advertisement"; font: 600 10px var(--f-body); letter-spacing: .1em; text-transform: uppercase; color: var(--muted) }
.ad-slot ins { display: block; width: 100%; min-height: 90px }
html[lang="hi"] .ad-slot::before { content: "विज्ञापन" }

/* Call to action */
.cta { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 12px 20px; margin: 34px 0 6px; padding: 20px 22px; border-radius: 16px; color: #fff;
  background: linear-gradient(135deg, var(--hero-b), var(--hero-a)) }
.cta p { margin: 0; max-width: 46ch; color: #fff }
.cta b { font: 700 1.1rem var(--f-display); display: block }
.cta a { background: #fff; color: #0b3d33; text-decoration: none; font-weight: 700; padding: 11px 18px; border-radius: 999px; white-space: nowrap }

/* FAQ */
details.q { border-bottom: 1px solid var(--line) }
details.q summary { cursor: pointer; list-style: none; padding: 16px 30px 16px 0; font-weight: 600; position: relative }
details.q summary::-webkit-details-marker { display: none }
details.q summary::after { content: "+"; position: absolute; right: 4px; top: 12px; font-size: 22px; color: var(--accent) }
details.q[open] summary::after { content: "−" }
details.q > div { padding: 0 0 14px }

/* Guides list */
.cards { display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: 14px; margin: 18px 0 }
.card { display: grid; gap: 6px; padding: 18px; border: 1px solid var(--line); border-radius: 14px; text-decoration: none; color: var(--ink); background: var(--surface) }
.card:hover { border-color: var(--accent) }
.card b { font: 700 1.05rem/1.3 var(--f-display) }
.card span { font-size: 14.5px; color: var(--muted) }

/* Footer */
.foot { max-width: 860px; margin: 0 auto; padding-block: 22px 40px; display: flex; flex-wrap: wrap; justify-content: space-between; gap: 8px 18px; font-size: 13.5px; color: var(--muted) }
.foot nav { display: flex; flex-wrap: wrap; gap: 6px 14px }
.foot a { color: var(--muted); display: inline-block; padding: 9px 2px }   /* comfortable tap height on phones */
.nav a { padding-block: 9px }

/* Share bar (share.js): WhatsApp, Telegram, Facebook, copy link */
.sharebar { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin: 30px 0 0; padding-top: 18px; border-top: 1px solid var(--line) }
.sharebar > span { font-weight: 600; font-size: 14px; margin-right: 4px }
.sharebar a, .sharebar button { display: inline-flex; align-items: center; gap: 7px; font: 600 13.5px var(--f-body); text-decoration: none; color: var(--ink); background: var(--field);
  border: 1px solid var(--line); border-radius: 999px; padding: 9px 14px; cursor: pointer; line-height: 1 }
.sharebar a:hover, .sharebar button:hover { border-color: var(--accent); color: var(--accent) }
.sharebar svg { width: 16px; height: 16px; flex: none }
.sharebar .wa svg { color: #25d366 } .sharebar .tg svg { color: #229ed9 } .sharebar .fb svg { color: #1877f2 }

/* Language switch (i18n.js, calculator pages) */
.langbtn { font: 600 13.5px var(--f-body); color: var(--accent); background: var(--accent-soft); border: 0; border-radius: 999px; padding: 8px 14px; cursor: pointer }
html[lang="hi"] body { font-family: var(--f-body), "Noto Sans Devanagari", sans-serif }

/* Tool pages (pension, NPS vs UPS, gratuity): form on the left, results on the right */
.tool { display: grid; grid-template-columns: minmax(0, 340px) minmax(0, 1fr); gap: 22px; align-items: start; margin: 8px 0 10px }
.tool form { display: grid; gap: 14px; padding: 18px; border: 1px solid var(--line); border-radius: 16px; background: var(--field) }
.tool label { display: grid; gap: 5px; font-weight: 600; font-size: 14px; line-height: 1.4 }
.tool label small, .tool .hint { font-weight: 400; font-size: 12.5px; color: var(--muted) }
.tool input[type="number"], .tool select { font: 500 15px var(--f-body); color: var(--ink); background: var(--surface); border: 1px solid var(--line); border-radius: 10px; padding: 10px 11px; width: 100%; min-width: 0 }
.tool input:focus-visible, .tool select:focus-visible { outline: none; border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-soft) }
.tool .row2 { display: grid; grid-template-columns: 1fr 1fr; gap: 10px }
.tool .check { display: flex; align-items: center; gap: 9px; font-weight: 500 }
.tool .check input { width: 18px; height: 18px; accent-color: var(--accent); margin: 0 }
.tool .seg { display: grid; grid-template-columns: 1fr 1fr; gap: 4px; padding: 4px; background: var(--surface); border: 1px solid var(--line); border-radius: 999px }
.tool .seg button { font: 600 13.5px var(--f-body); border: 0; border-radius: 999px; padding: 9px 8px; background: none; color: var(--muted); cursor: pointer }
.tool .seg button[aria-pressed="true"] { background: var(--accent); color: #fff }
.out { display: grid; gap: 16px; min-width: 0 }
.big { display: grid; gap: 4px; padding: 20px 22px; border-radius: 16px; color: #fff; background: linear-gradient(135deg, var(--hero-b), var(--hero-a)) }
.big span { font-size: 13.5px; opacity: .85 }
.big b { font: 700 clamp(2rem, 6vw, 2.8rem)/1.05 var(--f-display); letter-spacing: -.02em }
.big small { font-size: 13px; opacity: .85 }
.duo { display: grid; grid-template-columns: 1fr 1fr; gap: 12px }
.duo .big:nth-child(2) { background: linear-gradient(135deg, #8a6a22, #6f5219) }
.out table td.num, .out table th.num { text-align: right; white-space: nowrap }
.out tr.total td { font-weight: 700; border-top: 1.5px solid var(--ink) }
.small-note { font-size: 13px; color: var(--muted); margin: 0 }
.tools-strip { display: grid; grid-template-columns: repeat(auto-fill, minmax(190px, 1fr)); gap: 10px; margin: 14px 0 }
@media (max-width: 760px) { .tool { grid-template-columns: 1fr } }
@media (max-width: 420px) { .duo { grid-template-columns: 1fr } .tool .row2 { grid-template-columns: 1fr }
  .out table { font-size: 13px } .out th, .out td { padding: 8px 5px } .out td:first-child { min-width: 0 }
  .out table td.num { white-space: normal; overflow-wrap: normal } }   /* text like "Moves to pool" may wrap; amounts have no spaces so they stay whole */

@media (max-width: 560px) {
  body { font-size: 16px }
  .topbar { padding-block: 14px }
  main { border-radius: 16px }
  th, td { padding: 8px 7px; font-size: 13.5px }
  main { padding-inline: 18px }
  .cta a { width: 100% ; text-align: center }
  .foot { flex-direction: column }
}

/* "Calculators" dropdown in the top menu (behaviour in share.js) */
.dd { position: relative }
.dd > summary { list-style: none; cursor: pointer; display: inline-flex; align-items: center; gap: 7px; padding: 9px 2px; font-weight: 600; color: var(--accent) }
.dd > summary::-webkit-details-marker { display: none }
.dd > summary::after { content: ""; width: 7px; height: 7px; border-right: 1.8px solid currentColor; border-bottom: 1.8px solid currentColor; transform: rotate(45deg) translateY(-2px); transition: transform .2s }
.dd[open] > summary::after { transform: rotate(-135deg) translate(-1px, -1px) }
.dd > summary:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; border-radius: 6px }
.dd-menu { position: absolute; top: calc(100% + 4px); left: 0; z-index: 60; width: max-content; min-width: 240px; max-width: calc(100vw - 24px); display: grid; gap: 2px; padding: 6px;
  background: var(--surface); border: 1px solid var(--line); border-radius: 14px; box-shadow: 0 16px 36px -10px rgba(0,0,0,.28); text-align: left }
.nav .dd-menu a, .topnav .dd-menu a, .dd-menu a { display: block; padding: 10px 12px; border-radius: 9px; color: var(--ink); text-decoration: none; font-weight: 600; font-size: 14.5px; line-height: 1.3 }
.dd-menu a small { display: block; font-weight: 400; font-size: 12.5px; color: var(--muted); margin-top: 2px }
.nav .dd-menu a:hover, .topnav .dd-menu a:hover, .dd-menu a[aria-current="page"] { background: var(--accent-soft); color: var(--accent) }
.dd-menu hr { border: 0; border-top: 1px solid var(--line); margin: 4px 6px }