/* ==========================================================================
   TAFCOP सहायता — site polish
   Craft-level rules that per-block attributes cannot express cleanly:
   heading rhythm, card affordance, callout semantics, table legibility.
   Colours reference Kadence's global palette, so changing the palette in the
   Customizer still drives everything.
   ========================================================================== */

:root {
	--tf-accent: var(--global-palette1, #1E40AF);
	--tf-ink: var(--global-palette3, #10243F);
	--tf-soft: var(--global-palette5, #475569);
	--tf-line: var(--global-palette7, #E8F0FD);
	--tf-ground: var(--global-palette8, #F4F8FE);
	--tf-safe: var(--global-palette11, #15803D);
	--tf-risk: var(--global-palette13, #B91C1C);
	--tf-care: var(--global-palette14, #92400E);
	--tf-shadow: 0 1px 2px rgba(16,36,63,.05), 0 8px 24px rgba(16,36,63,.07);
	--tf-shadow-lift: 0 2px 6px rgba(16,36,63,.07), 0 16px 40px rgba(16,36,63,.11);
}

/* ---------- 1. Heading rhythm -------------------------------------------
   Proximity: a heading belongs to the text beneath it, so the space above is
   always larger than the space below. Without this every heading floats
   equidistant and the page reads as one undifferentiated column.           */

.entry-content h3 { margin-block: 2.75em .6em; line-height: 1.3; }
.entry-content h4 { margin-block: 2em .5em; line-height: 1.35; }
.entry-content h5 { margin-block: 1.6em .4em; }
.entry-content h3:first-child,
.entry-content h4:first-child { margin-block-start: 0; }

/* a section title earns a quiet accent mark, so scanning finds the seams */
.entry-content h3::before {
	content: "";
	display: block;
	width: 30px;
	height: 3px;
	margin-bottom: .55em;
	border-radius: 3px;
	background: var(--tf-accent);
	opacity: .85;
}
/* ...but not inside cards, callouts or accordions, where it would be noise */
.wp-block-kadence-infobox h3::before,
.wp-block-kadence-pane h3::before,
.kb-accordion-header h3::before,
.wp-block-kadence-rowlayout[class*="has-theme-palette"] h3::before { content: none; }

.entry-content p { margin-block: 0 1.15em; }
.entry-content > *:last-child { margin-block-end: 0; }

/* ---------- 2. The answer-first lead ------------------------------------
   The bolded opening sentence under a heading is the direct answer. Give it
   a touch more presence than ordinary bold so it reads as the answer.      */
.entry-content h3 + p > strong:first-child,
.entry-content h4 + p > strong:first-child {
	color: var(--tf-ink);
	font-weight: 600;
}

/* ---------- 3. Cards ----------------------------------------------------- */
.wp-block-kadence-infobox .kt-blocks-info-box-link-wrap,
.wp-block-kadence-infobox .kt-blocks-info-box-wrap {
	box-shadow: var(--tf-shadow);
	transition: transform 240ms cubic-bezier(.22,.61,.36,1),
	            box-shadow 240ms cubic-bezier(.22,.61,.36,1);
}
/* lift only where there is somewhere to go; a static card must not pretend */
.wp-block-kadence-infobox a.kt-blocks-info-box-link-wrap:hover {
	transform: translateY(-3px);
	box-shadow: var(--tf-shadow-lift);
}
.wp-block-kadence-infobox .kt-blocks-info-box-title { line-height: 1.35; }
.wp-block-kadence-infobox .kt-blocks-info-box-text { color: var(--tf-soft); }

/* numbered step cards: the number is the sequence marker, so make it read */
.wp-block-kadence-infobox .kt-blocks-info-box-number {
	color: var(--tf-accent);
	opacity: .9;
	font-variant-numeric: tabular-nums;
}

/* ---------- 4. Callouts --------------------------------------------------
   Tone already carries meaning through the ground colour; the inline-start
   bar makes that meaning legible at a glance while scrolling.              */
.entry-content .wp-block-kadence-rowlayout.kb-row-has-bg > .kt-row-column-wrap { border-radius: 14px; }

/* ---------- 5. Tables ----------------------------------------------------
   Kadence's border attributes did not render here, so the rules live in CSS
   where they are predictable.                                              */
.wp-block-kadence-table table { border-collapse: collapse; }
.wp-block-kadence-table th,
.wp-block-kadence-table td {
	border: 1px solid var(--tf-line);
	vertical-align: top;
}
.wp-block-kadence-table thead th,
.wp-block-kadence-table tr:first-child td {
	background: var(--tf-ground);
	font-weight: 600;
	color: var(--tf-ink);
}
.wp-block-kadence-table p { margin: 0; }

/* ---------- 6. Table of contents -----------------------------------------
   Two levels: clusters are the map, sections are the detail.               */
.wp-block-kadence-tableofcontents .kb-table-of-contents-list { padding-inline-start: 0; }
.wp-block-kadence-tableofcontents .kb-table-of-content-list-item { margin-block: 2px; }
.wp-block-kadence-tableofcontents .kb-table-of-contents__entry { line-height: 1.5; }
/* top level = the nine clusters, weighted so they read as the map */
.wp-block-kadence-tableofcontents > .kb-table-of-contents-wrap
  > .kb-table-of-contents-list > .kb-table-of-content-list-item
  > .kb-table-of-contents__entry {
	font-weight: 700;
	color: var(--tf-ink);
}
.wp-block-kadence-tableofcontents .kb-table-of-content-list-item
  .kb-table-of-contents-list .kb-table-of-contents__entry {
	font-weight: 400;
	color: var(--tf-soft);
}
.wp-block-kadence-tableofcontents .kb-table-of-contents__entry:hover { color: var(--tf-accent); }

/* ---------- 7. Accordion -------------------------------------------------- */
.wp-block-kadence-accordion .kt-accordion-pane { margin-bottom: 8px; }
.wp-block-kadence-accordion .kt-blocks-accordion-header {
	border-radius: 10px;
	transition: background 180ms ease, color 180ms ease;
}
.wp-block-kadence-accordion .kt-accordion-panel-inner { color: var(--tf-soft); }

/* ---------- 8. Prose links ------------------------------------------------ */
.entry-content a:not(.kt-button):not(.kb-table-of-contents__entry) {
	text-decoration-thickness: 1px;
	text-underline-offset: 3px;
}

/* ---------- 9. Lists ------------------------------------------------------ */
.entry-content ul, .entry-content ol { padding-inline-start: 1.3em; }
.entry-content li { margin-block: .35em; }
.entry-content li::marker { color: var(--tf-accent); }

@media (prefers-reduced-motion: reduce) {
	.wp-block-kadence-infobox .kt-blocks-info-box-link-wrap,
	.wp-block-kadence-infobox .kt-blocks-info-box-wrap { transition: none; }
	.wp-block-kadence-infobox a.kt-blocks-info-box-link-wrap:hover { transform: none; }
}

@media (max-width: 767px) {
	.entry-content h3 { margin-block: 2.1em .55em; }
	.entry-content h3::before { width: 24px; }
}

/* ---------- 10. Reading measure ------------------------------------------
   The section container is 820px so cards and tables get room, but running
   prose needs a shorter line. Constrain only paragraphs that are direct
   children of a column, so text inside cards and table cells is untouched.  */
.entry-content .kt-inside-inner-col > p,
.entry-content .kt-inside-inner-col > ul,
.entry-content .kt-inside-inner-col > ol {
	max-inline-size: 66ch;
}

/* ---------- 11. Table of contents: tap targets ---------------------------
   48 entries at 22px tall are fine for a mouse and awkward for a thumb.
   Open them up on touch widths without doubling the list's height.          */
@media (max-width: 767px) {
	.wp-block-kadence-tableofcontents .kb-table-of-contents__entry {
		display: block;
		padding-block: 9px;
		line-height: 1.45;
	}
	.wp-block-kadence-tableofcontents .kb-table-of-content-list-item { margin-block: 0; }
}

/* ---------- 12. Statistic labels -----------------------------------------
   Kadence renders the Count Up title as an <h2> with no attribute to change
   it, which puts four bogus headings in the outline. The labels are emitted
   as paragraphs instead now; this keeps them looking right.                 */
.wp-block-kadence-countup + p {
	margin-block-start: 2px;
	font-size: 14px;
	line-height: 1.5;
	color: var(--tf-soft);
	max-inline-size: none;
}

/* ---------- 13. Footer ---------------------------------------------------- */
.site-footer .footer-html-inner { font-size: .875rem; line-height: 1.7; }
.site-footer .footer-html-inner a { text-decoration: underline; text-underline-offset: 3px; }

/* ---------- 14. Statistic band -------------------------------------------
   Four sourced government figures. Three things were wrong before:

   1. `numberAlign`/`titleAlign` were strings, but Kadence indexes them as
      [desktop, tablet, mobile] arrays, so it emitted `text-align: l` and the
      declaration was discarded. Fixed in the block attributes; the cells get
      their alignment from the flex column here regardless.
   2. The large values wrapped mid-number ("445.59" / "410.01" broke, "62.94"
      did not), which left the four labels sitting at different heights and
      made the row read as broken rather than as a set.
   3. The figures had no container, so they floated in the prose column with
      nothing to say "these four belong together".

   Each figure now sits in its own card: the grid keeps every card the same
   height, `nowrap` keeps every number on one line, so all four labels start
   at the same baseline without any height hack. Tabular figures stop the
   digits jittering while the counter runs.                                  */

.entry-content .tf-statband > .kt-row-column-wrap {
	align-items: stretch;
}

/* Four figures across a 772px prose column leaves 127px of usable width per
   card, and "445.59 लाख" needs 160px, so the first two values were being
   clipped mid-word. Two by two gives each figure room to be read at a glance,
   which is the entire point of a statistic band. Kadence's own four-column
   rule is one class less specific, so this wins without !important.         */
@media (min-width: 768px) {
	.entry-content .tf-statband > .kt-row-column-wrap {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}
}

.entry-content .tf-statband .wp-block-kadence-column > .kt-inside-inner-col {
	position: relative;
	overflow: hidden;
	display: flex;
	flex-direction: column;
	height: 100%;
	padding: 28px 28px 24px;
	background: #FFFFFF;
	border: 1px solid var(--tf-line);
	border-radius: 14px;
	box-shadow: var(--tf-shadow);
	transition:
		opacity .55s cubic-bezier(.22, .61, .36, 1) var(--tf-delay, 0ms),
		transform .55s cubic-bezier(.22, .61, .36, 1) var(--tf-delay, 0ms),
		box-shadow .25s ease;
}

/* an accent rule across the top ties the four cards to the section's colour */
.entry-content .tf-statband .wp-block-kadence-column > .kt-inside-inner-col::before {
	content: "";
	position: absolute;
	inset-block-start: 0;
	inset-inline: 0;
	height: 3px;
	background: linear-gradient(90deg, var(--tf-accent), #3B82F6);
}

/* the number: one line, always. Kadence inlines 34px at a specificity of
   two classes, so three classes here wins without !important.              */
.entry-content .tf-statband .kb-count-up-number {
	white-space: nowrap;
	font-variant-numeric: tabular-nums;
	font-size: 36px;
	letter-spacing: -.015em;
	line-height: 1.15;
}

.entry-content .tf-statband .wp-block-kadence-countup + p {
	margin-block-start: 7px;
	font-size: 14.5px;
	line-height: 1.5;
	color: var(--tf-soft);
	text-wrap: pretty;
}

@media (hover: hover) {
	.entry-content .tf-statband .wp-block-kadence-column > .kt-inside-inner-col:hover {
		box-shadow: var(--tf-shadow-lift);
		transform: translateY(-2px);
	}
}

/* Entrance. The pre-animation state is added by script (`--armed`), never in
   the stylesheet, so with JavaScript off or reduced motion on, the cards are
   simply there. Nothing is hidden by CSS that CSS cannot bring back.        */
.tf-statband--armed .wp-block-kadence-column > .kt-inside-inner-col {
	opacity: 0;
	transform: translateY(14px);
}

.tf-statband--armed.tf-statband--in .wp-block-kadence-column > .kt-inside-inner-col {
	opacity: 1;
	transform: none;
}

@media (max-width: 767px) {
	.entry-content .tf-statband .wp-block-kadence-column > .kt-inside-inner-col {
		padding: 22px 20px 18px;
	}
	.entry-content .tf-statband .kb-count-up-number { font-size: 30px; }
}

/* ---------- 15. Header ----------------------------------------------------
   Three bands, each with one job:

     top    — the disclaimer and the real government address. This site warns
              readers about lookalike TAFCOP portals, so the first thing in
              the document says plainly that this is not one, and gives the
              only address that is. It is deliberately the same deep ink as
              the footer, so the page is bookended by the same voice.
     main   — wordmark, navigation, one call to action. Sticky, because the
              page is long and the action should never be more than a glance
              away.

   The site does not imitate a government site: no emblem, no tricolour, no
   seal. Credibility is built from sourcing and plain labelling instead.     */

:root {
	--tf-deep: #0C1D36;
	--tf-deep-soft: #A9BEDC;
	--tf-deep-line: rgba(255, 255, 255, .11);
	--tf-warn: #FBBF24;
}

/* --- top band --- */
body .site-top-header-wrap {
	background: var(--tf-deep);
}

/* the row is a two-side grid; with only the left side filled it would hug
   its content, so the single item is told to take the whole row */
.site-top-header-wrap .site-header-top-section-left,
.site-top-header-wrap .site-header-item,
.site-top-header-wrap .header-html,
.site-top-header-wrap .header-html-inner {
	width: 100%;
}

.tf-topbar {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: 6px 20px;
	padding-block: 8px;
	font-size: 12.5px;
	line-height: 1.5;
}

.tf-topbar__note {
	display: inline-flex;
	align-items: center;
	gap: 7px;
	color: var(--tf-deep-soft);
	letter-spacing: .01em;
}

.tf-topbar__note svg {
	flex: none;
	color: var(--tf-warn);
}

.site-top-header-wrap .tf-topbar__gov {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	color: #FFFFFF;
	font-weight: 600;
	text-decoration: underline;
	text-underline-offset: 3px;
	text-decoration-color: rgba(255, 255, 255, .45);
}

.site-top-header-wrap .tf-topbar__gov:hover {
	text-decoration-color: #FFFFFF;
}

.tf-topbar__gov svg { flex: none; opacity: .8; }

/* --- main band --- */
body .site-main-header-wrap {
	background: #FFFFFF;
	border-bottom: 1px solid var(--tf-line);
}

body .site-main-header-wrap.item-is-stuck {
	box-shadow: 0 1px 0 var(--tf-line), 0 10px 30px rgba(16, 36, 63, .09);
	border-bottom-color: transparent;
}

.site-branding .site-title {
	font-weight: 700;
	letter-spacing: -.015em;
	color: var(--tf-ink);
}

.site-branding a:hover .site-title { color: var(--tf-accent); }

/* --- navigation --- */
.header-navigation .menu > li > a {
	font-size: 15px;
	font-weight: 500;
	color: var(--tf-ink);
	padding-inline: 14px;
}

.header-navigation .menu > li > a:hover,
.header-navigation .menu > li.current-menu-item > a {
	color: var(--tf-accent);
}

/* dropdowns read as cards, not as a bare list dropped on the page */
.header-navigation .sub-menu {
	padding: 8px;
	min-width: 248px;
	background: #FFFFFF;
	border: 1px solid var(--tf-line);
	border-radius: 14px;
	box-shadow: var(--tf-shadow-lift);
}

.header-navigation .sub-menu li a {
	padding: 9px 12px;
	border-radius: 9px;
	font-size: 14.5px;
	line-height: 1.45;
	color: var(--tf-ink);
	border: 0;
}

.header-navigation .sub-menu li a:hover {
	background: var(--tf-ground);
	color: var(--tf-accent);
}

/* --- call to action --- */
.site-header-item .header-button.button-style-filled {
	border-radius: 10px;
	font-size: 14.5px;
	font-weight: 600;
	padding: 10px 18px;
	box-shadow: 0 1px 2px rgba(16, 36, 63, .12);
	transition: transform .18s ease, box-shadow .18s ease, background-color .18s ease;
}

@media (hover: hover) {
	.site-header-item .header-button.button-style-filled:hover {
		transform: translateY(-1px);
		box-shadow: 0 4px 14px rgba(30, 64, 175, .3);
	}
}

/* --- mobile --- */
@media (max-width: 1024px) {
	.tf-topbar {
		justify-content: center;
		gap: 4px 14px;
		font-size: 11.5px;
		padding-block: 7px;
	}
	/* the full address is too long for a phone; the label still names the
	   domain, which is the part that matters for spotting a fake */
	.tf-topbar__gov { font-size: 11.5px; }
}

#mobile-drawer .menu > li > a {
	font-weight: 600;
	font-size: 16px;
}

/* the drawer is deep navy, so the slate used for secondary text elsewhere
   lands at about 2:1 against it. Submenu links take the light tint instead,
   which keeps them clearly subordinate to their parent and still readable. */
#mobile-drawer .sub-menu li a {
	font-size: 15px;
	font-weight: 500;
	color: var(--tf-deep-soft);
}

#mobile-drawer .mobile-button {
	margin-block-start: 18px;
}


/* ---------- 16. Footer ----------------------------------------------------
   A deep band that closes the page and carries the whole site map: the guide
   sections, every topic cluster, the tools, and the policy pages that say who
   runs this and how it is checked. On a topic crowded with anonymous
   scrapers, publishing that map in full is itself a trust signal.           */

body .site-footer,
body .site-middle-footer-wrap,
body .site-bottom-footer-wrap {
	background: var(--tf-deep);
}

body .site-middle-footer-wrap {
	padding-block: 56px 44px;
}

body .site-footer,
body .site-footer p,
body .site-footer .widget {
	color: var(--tf-deep-soft);
}

body .site-footer .widget-title,
body .site-footer .widgettitle {
	margin: 0 0 16px;
	font-size: 13px;
	font-weight: 700;
	letter-spacing: .07em;
	text-transform: uppercase;
	color: #FFFFFF;
}

body .site-footer a {
	color: #CBDCF6;
	text-decoration: none;
}

body .site-footer a:hover {
	color: #FFFFFF;
	text-decoration: underline;
	text-underline-offset: 3px;
}

/* link columns: no bullets, generous tap targets */
.site-footer .tf-flist {
	margin: 0;
	padding: 0;
	list-style: none;
}

.site-footer .tf-flist li {
	margin: 0;
	list-style: none;
}

.site-footer .tf-flist a {
	display: block;
	padding-block: 6px;
	font-size: 14.5px;
	line-height: 1.45;
}

/* brand column */
.tf-fbrand__name {
	margin: 0 0 10px;
	font-size: 17px;
	font-weight: 700;
	color: #FFFFFF;
	letter-spacing: -.01em;
}

.site-footer .tf-fbrand__desc {
	margin: 0 0 16px;
	font-size: 14px;
	line-height: 1.65;
	max-inline-size: 38ch;
}

.site-footer .tf-fbrand__warn {
	display: inline-flex;
	align-items: center;
	gap: 7px;
	margin: 0 0 16px;
	padding: 7px 12px;
	font-size: 13px;
	font-weight: 600;
	color: #FDE8B4;
	background: rgba(251, 191, 36, .1);
	border: 1px solid rgba(251, 191, 36, .28);
	border-radius: 999px;
}

.site-footer .tf-fbrand__warn svg { flex: none; color: var(--tf-warn); }

.site-footer a.tf-fgov {
	display: inline-flex;
	align-items: center;
	gap: 7px;
	padding: 10px 16px;
	font-size: 14px;
	font-weight: 600;
	color: #FFFFFF;
	background: rgba(255, 255, 255, .08);
	border: 1px solid var(--tf-deep-line);
	border-radius: 10px;
	transition: background-color .2s ease, border-color .2s ease;
}

.site-footer a.tf-fgov:hover {
	background: rgba(255, 255, 255, .15);
	border-color: rgba(255, 255, 255, .3);
	text-decoration: none;
}

/* bottom band */
body .site-bottom-footer-wrap {
	border-top: 1px solid var(--tf-deep-line);
	padding-block: 18px;
	font-size: 13px;
}

.site-footer .footer-navigation .menu {
	gap: 4px 6px;
}

.site-footer .footer-navigation .menu > li > a {
	padding: 4px 10px;
	font-size: 13px;
}

@media (max-width: 767px) {
	body .site-middle-footer-wrap { padding-block: 40px 28px; }
	.site-footer .site-footer-section { margin-block-end: 26px; }
	.site-footer .tf-fbrand__desc { max-inline-size: none; }
	body .site-bottom-footer-wrap { text-align: center; }
}

/* The top row is a two-sided grid. With only the left side filled, Kadence
   still reserves the right column, so the official address stopped ~390px
   short of the container edge instead of sitting opposite the disclaimer. */
body .site-top-header-wrap .site-top-header-inner-wrap.site-header-row {
	grid-template-columns: 1fr;
}

/* the pill and the button share a line and wrap together on narrow columns */
.site-footer .tf-fbrand__warn { margin: 0 10px 12px 0; vertical-align: middle; }
.site-footer a.tf-fgov { vertical-align: middle; }

/* ---------- 17. Screenshots ----------------------------------------------
   Portal screenshots inside the step-by-step. They are UI, not photography,
   so they get the same card treatment as everything else on the page: white
   ground, hairline edge, soft shadow. A screenshot that bleeds into the page
   reads as part of this site rather than as a picture of another one.

   Core's lightbox is enabled on these blocks, which matters more than it
   looks: the list screenshot is 1307px wide and lands at ~343px on a phone,
   where the button labels are unreadable. Tapping opens it full size.      */

.entry-content .tf-shot {
	margin-block: 30px;
}

.entry-content .tf-shot img {
	display: block;
	width: 100%;
	height: auto;
	background: #FFFFFF;
	border: 1px solid var(--tf-line);
	border-radius: 12px;
	box-shadow: var(--tf-shadow);
}

.entry-content .tf-shot figcaption {
	margin-block-start: 10px;
	font-size: 14px;
	line-height: 1.6;
	color: var(--tf-soft);
	text-align: left;
	max-inline-size: 66ch;
}

/* the lightbox trigger is a real button on touch, so say so */
.entry-content .tf-shot .lightbox-trigger { cursor: zoom-in; }

@media (max-width: 767px) {
	.entry-content .tf-shot { margin-block: 24px; }
	.entry-content .tf-shot figcaption { font-size: 13.5px; }
}